Why is my javascript not modifying the html?

Question

Supposed to insert entered text between input field and send button, but it does noting.

<body>                              
    <section>
        <p>passcode: <input type=text id=passcode></p>
        <section id=middle></section>
        <p><input type=button id=button value=send></p>
    </section>
    <script type="text/javascript">
        var log=new Array();
        document.getElementById("button").onclick=exlog();
        exlog(){
            log.push(document.getElementById("passcode").value)
            for(i=0;i<log.length;i++){
            document.getElementById("middle").innerHtml=log[i];
        }
    }
    </script>
</body>

Jeremy J Starcher · Accepted Answer · 2012-09-08 04:49:56Z

3

Change

        document.getElementById("middle").innerHtml=log[i];

to

        document.getElementById("middle").innerHTML=log[i];

Reference: https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

answered Sep 8, 2012 at 4:49

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Musa · Accepted Answer · 2012-09-08 04:56:32Z

2

Your exlog function is missing the function keyword and you are setting the onclick handler incorrectly.

Also innerHtml should be innerHTML

    document.getElementById("button").onclick=exlog;
    function exlog(){
        log.push(document.getElementById("passcode").value)
        for(i=0;i<log.length;i++){
        document.getElementById("middle").innerHTML=log[i];
    }

edited Sep 8, 2012 at 4:56

answered Sep 8, 2012 at 4:45

Musa

97.9k17 gold badges123 silver badges144 bronze badges

1 Comment

Musa Over a year ago

@user1656125 You called the exlog function instead of assigning it to the onclick property

Behram Mistree · Accepted Answer · 2012-09-08 04:53:59Z

1

I noticed a couple of problems with your code. Most importantly, you should use innerHTML, not innerHtml (note capitalization).

Additionally, you need to be careful of how you deal with functions. Just putting exlog(){} will not create a function. Instead, you should use the function keyword.

Finally, you want to set the onclick handler to the function exlog. What you have used will actually set the onclick handler to the result of evaluating the exlog function.

Here's a solution with all of the suggested changes:

<body>                              
<section>
    <p>passcode: <input type=text id=passcode></p>
    <section id=middle></section>
    <p><input type=button id=button value=send></p>
</section>
<script type="text/javascript">
    var log=new Array();
    document.getElementById("button").onclick=exlog;
    function exlog(){
        log.push(document.getElementById("passcode").value)
        for(i=0;i<log.length;i++){
alert(log[i]);
        document.getElementById("middle").innerHTML=log[i];
    }
}
</script>
</body>

answered Sep 8, 2012 at 4:53

Behram Mistree

4,3583 gold badges21 silver badges22 bronze badges

2 Comments

Jeremy J Starcher Over a year ago

Use of new Array() is considered bad style now. Better off to say var log = []; instead. In particular, most find the code easier to read and the result of new Array(10) construct can be ... surprising.

some Over a year ago

Also, the values of the attributes of the html elements should be quoted.

Lucas Green · Accepted Answer · 2012-09-08 05:36:36Z

0

You are evaluating the function by using it like this: exlog(), since exlog doesn't have a return statement, it evaluates to undefined, which the browser won't execute.

If you want to assign it you can just use it's name exlog

Also, as mentioned by Teemu and Musa, the function keyword was missing from the definition of exlog

Also, the capitalization of innerHTML has to be exact, mixing cases wont work.

<body>                              
    <section>
        <p>passcode: <input type=text id=passcode></p>
        <section id=middle></section>
        <p><input type=button id=button value=send></p>
    </section>
    <script type="text/javascript">
        var log = [];
        document.getElementById("button").onclick = exlog; // <== no need to evaluate the function, just assign it.
        function exlog(){ // <== as pointed out below function keyword was missing
            log.push(document.getElementById("passcode").value);
            document.getElementById("middle").innerHTML += log[log.length - 1]; // <== needs to be capitilized exactly like this
        }
    </script>
</body>

edited Sep 8, 2012 at 5:36

answered Sep 8, 2012 at 4:45

Lucas Green

3,95924 silver badges27 bronze badges

3 Comments

user1656125 Over a year ago

Thanks! I made the change and it works. But I don't get what you mean by the browser won't execute a function without a return, isn't that what we're doing here with the fix?

Lucas Green Over a year ago

What I mean is that if you run the function like this: exlog(), it's implicit return value is undefined which the browser doesn't know how to execute.

user1656125 Over a year ago

I understand that it's return value is undefined but the function executes, is this just something semantic I'm misunderstanding? And when I click send it replaces what was previously sent. Do you know how to concatenate multiple entries. THANKS I REALLY APPRECIATE IT.

Collectives™ on Stack Overflow

Why is my javascript not modifying the html?

4 Answers 4

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related