CODEWITHSUNDEEP
javascripthtmlinnerhtml
Brian
Brian

Reputation: 47

document.getElementById.innerHTML is not working correctly?

I've used this all the time in the past without any problems. I can't seem to figure out what's wrong this time; maybe I just need a second set of eyes.

This is my HTML code: 

<form id="myForm">
    <table>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>2014 HK Army Hardline Paintball Jersey</td>
            <td>$89.95</td>
        </tr>
        <tr>
            <td>Planet Eclipse 2013 Distortion Gloves</td>
            <td>$34.95</td>
        </tr>
        <tr>
            <td>Eclipse Geo 3.5 Paintball Marker</td>
            <td>$1,600.00</td>
        </tr>
    </table>
    <p>How many Paintball Jerseys would you like to order?</p>
    <input id="jersey" type="number" value="0">
    <p>How many Paintball Gloves would you like to order?</p>
    <input id="gloves" type="number" value="0">
    <p>How many Paintball Markers would you like to order?</p>
    <input id="marker" type="number" value="0"><br>
    <input type="button" onclick="submit()" value="Submit Form">
    <input type="button" onclick="reset()" value="Reset Form"><br>
    <p id="result"> </p>
</form>

And my JavaScript code: 

function submit() {
    document.getElementById("result").innerText = "hi";
}

Obviously I used "hi" as a test. It does not show up where my cursor is in p id="result" when I open the website up. Any suggestions are appreciated.

EDIT: I know it says document.getElementById("result").innerText = "hi";, but I have tried it with .innerHTML as well and still nothing.

Upvotes: 3

Views: 2738

Answers (2)

Felix Kling
Felix Kling

Reputation: 816364

You are seeing this problem because you are using inline event handlers. The scope of inline event handlers is a bit tricky.

Long story short: you are not calling your submit function at all.

The methods of the <form> DOM element are in the scope of the inline event handler. So in the event handler, submit is not referring to your user-defined function, it is referring to and calling myForm.submit, and thus submitting the form.

You can easily test this by comparing to document.getElementById('myForm').submit (check the console).

function submit() {
    // doesn't matter what's here  
}
<form id="myForm">
    <input type="button" onclick="console.log('DOM element submit', submit === document.getElementById('myForm').submit);" value="Click me!">
</form>

You can fix that by renaming the function or not using inline event handlers.

Side note: innerText is not supported by Firefox.

Upvotes: 5

Deepak Goswami
Deepak Goswami

Reputation: 2030

Try This

Change your function name to other then submit for example submit2():

<form id="myForm">
    <table>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>2014 HK Army Hardline Paintball Jersey</td>
            <td>$89.95</td>
        </tr>
        <tr>
            <td>Planet Eclipse 2013 Distortion Gloves</td>
            <td>$34.95</td>
        </tr>
        <tr>
            <td>Eclipse Geo 3.5 Paintball Marker</td>
            <td>$1,600.00</td>
        </tr>
    </table>
    <p>How many Paintball Jerseys would you like to order?</p>
    <input id="jersey" type="number" value="0">
    <p>How many Paintball Gloves would you like to order?</p>
    <input id="gloves" type="number" value="0">
    <p>How many Paintball Markers would you like to order?</p>
    <input id="marker" type="number" value="0"><br>
    <input type="button" onclick="submit2()" value="Submit Form">
    <input type="button" onclick="reset()" value="Reset Form"><br>
    <p id="result"> </p>
</form>


<script type="text/javascript">
    function submit2(){
        document.getElementById("result").innerHTML = "hi";
    } 
</script>

I hope this helps you.

Upvotes: 0

Related Questions