Multiplying two inputs with JavaScript & displaying in text box

Question

I am new to JavaScript & am looking for some help doing simple multiplication of two numbers & displaying the result in another text box. I have been trying to get this working for days to no avail :(

Here is the basic HTML along with the JavaScript & a link to a fiddle here http://jsbin.com/egeKAXif/1/edit

What am I doing wrong?

The application I want to write will have at least 12 rows, how would I extend the JavaScript / HTML to accommodate this? Would each input identifier need to be unique?

Any help appreciated :)

    <table width="80%" border="0">
    <tr>
        <th>Box 1</th>
        <th>Box 2</th>
        <th>Result</th>
    </tr>
    <tr>
        <td><input id="box1" type="text" /></td>
        <td><input id="box2" type="text" onchange="calculate()" /></td>
        <td><input id="result" /></td>
    </tr>

    </table>

<script>

    function calculate() {
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value;
    var result = document.getElementById('result'); 
    var myResult = box1 * box2;
    result.innerHTML = myResult;

}
</script>

Answer 1

The first thing you have got to change is the line with the multiplication. It should be: var myResult = myBox1 * myBox2;

You should not use innerHTML with input fields - use value.

Additional to that, the onchange event fires only when the input looses the focus. You might want to use the oninput event.

Take a look at the working example: http://jsbin.com/OJOlARe/1/edit

Answer 2

<table width="80%" border="0">
  <tr>
    <th>Box 1</th>
    <th>Box 2</th>
    <th>Result</th>
  </tr>
  <tr>
    <td><input id="box1" type="text" oninput="calculate();" /></td>
    <td><input id="box2" type="text" oninput="calculate();" /></td>
    <td><input id="result" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<script>


    function calculate() {
        var myBox1 = document.getElementById('box1').value; 
        var myBox2 = document.getElementById('box2').value;
        var result = document.getElementById('result'); 
        var myResult = myBox1 * myBox2;
          document.getElementById('result').value = myResult;

    }
</script>

You cannot use result.innerHTML = myResult; on javascript variable directly. First you need to read the html dom element document.getElementById('result') then call the value property for input fields or innerHTML for div, span elements.