CODEWITHSUNDEEP
javascripthtml
user1656125
user1656125

Reputation: 107

Why is my javascript not modifying the html?

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>

Upvotes: 2

Views: 95

Answers (4)

Lucas Green
Lucas Green

Reputation: 3959

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>

Upvotes: 0

Musa
Musa

Reputation: 97672

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];
    }

Upvotes: 2

Behram Mistree
Behram Mistree

Reputation: 4308

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>

Upvotes: 1

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

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

Upvotes: 3

Related Questions