not getting the multiplication in 4th text box

Question

I want to multiply the three numbers entered in three seprate textbox id is(PaperHeight & PaperWidth & Rate) and then get the product in fourth textbox id is (FinalRate)

I want to get the output when the submit button is clicked

following is my code

function btnclick() {
  var PictureHeight = document.getElementById('PictureHeight').value;
  var PictureWidth = document.getElementById('PictureWidth').value;
  var Rate = document.getElementById('Rate').value;
  var FinalRate = document.getElementById('FinalRate').value;

  FinalRate = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Calculator</title>
</head>

<body>
  <center>

    <h1>Rate Calculator</h1>

    Enter the Picture dimention and Rate<br/>

    <div class="container">
      <div class="row">
        <div class="col">

          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
            <input type="number" class="form-control" id="PictureWidth">
          </div>

        </div>

        <div class="col">
          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
            <input type="number" class="form-control" id="PictureHeight">
          </div>
        </div>

        <div class="col">
          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
            <input type="number" class="form-control" id="Rate">
          </div>
        </div>
        <br>

        <div class="col">
          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">&#8377;</label>
            <input type="number" class="form-control" id="FinalRate">
          </div>
        </div>


      </div>
    </div>

    <button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>


  </center>




  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
  </script>
</body>

</html>

FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate); — srWebDev, Jan 19 '22 at 17:14
@DCR Would love to know why someone upvoted and answered this question which has been asked and answered hundreds of times before... — Heretic Monkey, Jan 19 '22 at 17:21
Does this answer your question? [Set Value of Input Using Javascript Function](https://stackoverflow.com/questions/5700471/set-value-of-input-using-javascript-function) — Heretic Monkey, Jan 19 '22 at 17:53
@DCR Get over yourself with the gestapo. It's imaginary internet points not gas chambers. I was spending my time finding the appropriate duplicate. — Heretic Monkey, Jan 19 '22 at 17:53

score 1 · Accepted Answer · answered Jan 19 '22 at 17:13

get the element and then set the value.

function btnclick() {
  var PictureHeight = document.getElementById('PictureHeight').value;
  var PictureWidth = document.getElementById('PictureWidth').value;
  var Rate = document.getElementById('Rate').value;
  var FinalRate = document.getElementById('FinalRate');

  FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
  

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Calculator</title>
</head>

<body>
  <center>

    <h1>Rate Calculator</h1>

    Enter the Picture dimention and Rate<br/>

    <div class="container">
      <div class="row">
        <div class="col">

          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
            <input type="number" class="form-control" id="PictureWidth">
          </div>

        </div>

        <div class="col">
          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
            <input type="number" class="form-control" id="PictureHeight">
          </div>
        </div>

        <div class="col">
          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
            <input type="number" class="form-control" id="Rate">
          </div>
        </div>
        <br>

        <div class="col">
          <div class="input-group input-group-sm mb-3">
            <label class="col-sm-2 col-form-label col-form-label-sm">&#8377;</label>
            <input type="number" class="form-control" id="FinalRate">
          </div>
        </div>


      </div>
    </div>

    <button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>


  </center>




  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
  </script>
</body>

</html>

not getting the multiplication in 4th text box

1 Answers1