CODEWITHSUNDEEP
javascriptjqueryhtml
Vaibhav Dalela
Vaibhav Dalela

Reputation: 87

javaScript multiply two numbers and show the result into third html input

I am trying to take a number from my html form and then multiply it with a number from my JavaScript function and displaying the result in another html input. Want I want is when the user click on the result input area then only the multiplication result shows.

<script type="text/javascript">
  function myFunction() {
    var y = document.getElementById("km").value;
    var z = 14;
    var x = y * z;
    document.getElementById("bill").innerHTML = x;


  }
<table>
<tr> 
   <td>Total Kms Run</td>
   <td><input type="text" id="km" name="km" required>
   </tr>
    <tr> 
   <td>Total Bill</td>
   <td><input type="text" id = "bill" name="bill" required onclick="myFunction()">
   </tr>
</table

Upvotes: 0

Views: 7174

Answers (3)

SharpEdge
SharpEdge

Reputation: 1762

You have made many syntax mistakes in html

function myFunction() {
    var y = document.getElementById("km").value;
    var z = 14;
    var x = Number(y) * Number(z);
    document.getElementById("bill").value = x;

}
<table>
   <tr> 
       <td>Total Kms Run</td>
       <td><input type="text" id="km" name="km" required ></td>
  </tr>
  <tr> 
       <td>Total Bill</td>
      <td><input type="text" id="bill" name="bill" required onclick="myFunction()"></td>
   </tr>
</table>

Upvotes: 1

Pranay Aher
Pranay Aher

Reputation: 434

Do Change like this

<script type="text/javascript">
  function myFunction() {

   var y = document.getElementById("km").value;
    var z = 14;
    var x = y * z;
    document.getElementById("bill").value = x;


  }</script>

Upvotes: 1

Mathew Thompson
Mathew Thompson

Reputation: 56459

You're adding the numbers, not multiplying them :).

That aside, inputs don't have innerHTML, you need to set the value:

document.getElementById("bill").value = x;

Upvotes: 2

Related Questions