document.getElementById.innerHTML is not working correctly?

Question

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.

Please include actual code in your question, don't *link* to *images* of your code. — Felix Kling, Nov 19 '14 at 05:26
I've had success with it in the past with Chrome, and am once again using Chrome. — Brian, Nov 19 '14 at 05:26
Sorry Felix, it wouldn't let me embed images because I lack the reputation. I'll fix that. — Brian, Nov 19 '14 at 05:27
Try to use another name for the function `submit()`, otherwise browser submits the form. For example - `submit2()` and the same when calling it - http://jsfiddle.net/2dnmmqyj/ — Cheery, Nov 19 '14 at 05:34

score 5 · Answer 1 · edited May 23 '17 at 12:27

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.

Thanks, Felix! It worked. Good to know it was a lack of experience on my part, and not an error I missed. I understand exactly what you mean though, the way you explained it. — Brian, Nov 19 '14 at 05:39
@Brian: You're welcome! Inline event handlers *are* tricky. One of the reasons why to avoid them :) — Felix Kling, Nov 19 '14 at 05:45

score 0 · Answer 2 · answered Nov 19 '14 at 05:46

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.

document.getElementById.innerHTML is not working correctly?

2 Answers2