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