Multiplying two inputs with JavaScript & displaying in text box

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


<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.

Tags:

Javascript