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>

JohnT · Accepted Answer · 2017-04-01 17:01:34Z

11

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

edited Apr 1, 2017 at 17:01

JohnT

1511 gold badge1 silver badge16 bronze badges

answered Jan 19, 2014 at 22:08

Alex

2,12616 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NRKirby Over a year ago

Genius! It's working now :) How would I extend this to work on a table with 12 rows? I'm thinking I need to iterate over the entire table? Do I need different IDs for each input / result ??

Josien Over a year ago

Hey @user3213157! If you find this answer useful, you can make it the "accepted answer" by clicking the checkmark at the left side of the answer. As for the new question you ask in the previous comment: better to ask a whole new question for that if it's still a problem! And: welcome to StackOverflow :-)

Alex Over a year ago

Here is an example for multiple fields: jsbin.com/uNOVeHig/1/edit Hope you don't mind me using jquery. But it makes it a lot easier.

Atul Sharma · Accepted Answer · 2018-02-20 11:53:07Z

3

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

edited Feb 20, 2018 at 11:53

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

answered Feb 20, 2018 at 11:22

munish rana

413 bronze badges

1 Comment

NightOwl888 Over a year ago

It would be great if you would add a few comments to explain this answer. Code-only answers frequently get deleted upon review. See How to Ask.

Collectives™ on Stack Overflow

Multiplying two inputs with JavaScript & displaying in text box

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related