GetElementbyID and Innerhtml not working

Question

I don't know what I'm doing wrong. This is a 2 part question. Please see code below. First, it keeps saying that the variable capitals is null. Second, I'm unable to get innerHTML working. I'm not sure why it isn't working. I know I have document.write which I'm not suppose to use so I'm working on understanding getElementbyId.innerHTML to work.

HTML

<form name="shares">
        <table>
            <tr><td>Enter information here:</td></tr>
            <tr>
                <td>Capital to Invest</td>
                <td id="capitalr"><input type="text" name="capital">    </td> 
                </td>
            </tr>
            <tr>
                <td>Price per share</td>
                <td><input type="text" name="price" onchang="calculate();"></td> 
            </tr>
            <tr>
            <td></td>
                <td><input type="button" value="Compute" onclick="calculate()"></td>
            <tr><td>The quantity you can be:</td></tr>
            <tr>
            <td>No. of shares</td>
            </tr>
            <tr>
            <td>Change</td>
            </tr>
        </table>
            <p id="hello"></p>
    </form>

JavaScript

var capitals = document.getElementById("capitalr");
var x = capitals.id;
var pps = document.shares.price.value;
function calculate () {
    document.write("Capital = " + capitals +"<br>");
    document.write("Price per share is = " + pps);
}
document.getElementById("hello").innerHTML="Hello";

Go to jsfiddle.net and paste in your code, then post a link to the non working code so we can see what isn't working. — adeneo, May 10 '14 at 22:07
Note that every time the calculate() function runs, the entire document is overwritten and all your HTML is gone. — adeneo, May 10 '14 at 22:08
Your fiddle doesn't work for different reasons: You don't have an element with ID `test` and you didn't bind `calculate` as event handler. You wouldn't be able to use `calculate` as event handler either, since you set up the fiddle to run the code inside the load event handler, which makes `calculate` local to the event handler. I recommend to make yourself familiar with JSFiddle first, so that you can reproduce the exact same problem that you are experiencing. — Felix Kling, May 10 '14 at 22:16

score 0 · Answer 1 · answered May 10 '14 at 22:37

0

1) The <tr> for your button doesn't have a </tr>.
2) There's a timing problem -- you need to put your code in a function that executes at onload time.

<body onload="fnonload();">

I suggest you use "console.log" statements as a debugging tool to see how your code is progressing. That's helped me a lot.

answered May 10 '14 at 22:37

dcromley

1,373
1
8
23

Thanks! Where I can go to do more studying on the timing issue? On a different project I had, I used the onclick handler to grab getElementById. On this one, I wanted to do it onload. It's not really what I'm going to do but I just wanted to see it. – Iditarod1973 May 11 '14 at 18:18
@user3512034 You're welcome. I went to the http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element link and learned that there are many ways to solve this. Another link is http://stackoverflow.com/questions/191157/window-onload-vs-body-onload. It's a bottomless pit. (Can you accept my answer? Probably not.) – dcromley May 11 '14 at 19:00

GetElementbyID and Innerhtml not working

1 Answers1