Javascript code running function more than once

Question

So I'm trying to make an area calculator for a trapezoid using html and js. My code is shown below, but for some reason I am not getting correct answers out of this. I suspect that is because the code is running the function more than once, but I'm not really sure.

function solveArea() {
  var base1, base2, height, area;
  base1 = document.getElementById("base1").value;
  base2 = document.getElementById("base2").value;
  height = document.getElementById("height").value;
  area = ((base1 + base2) / 2) * height;
  document.getElementById("area").value = area;
}

<form>
  <input id="base1" type="number" placeholder="Base 1">
  <input id="base2" type="number" placeholder="Base 2">
  <input id="height" type="number" placeholder="Height">
  <input id="area" type="number" readonly="" placeholder="Area">
  <input id="calculate" type="button" value="Calculate" onclick="solveArea()">
  <input type="reset" value="Clear">
</form>

Harney · Accepted Answer · 2021-01-23 14:15:48Z

1

You can use parseInt

        function solveArea(){
            var base1, base2, height, area;
            base1= parseInt(document.getElementById("base1").value, 10);
            base2= parseInt(document.getElementById("base2").value, 10);
            height= parseInt(document.getElementById("height").value, 10);
            area = ((base1 + base2) / 2)* height;
            document.getElementById("area").value = area;
        }

edited Jan 23, 2021 at 14:15

answered Jan 23, 2021 at 14:06

Harney

3521 silver badge4 bronze badges

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

1 Comment

pilchard Over a year ago

Always provide a radix, from the docs: "Be careful—this does not default to 10! If the radix value is not of the Number type it will be coerced to a Number" base1=parseInt(document.getElementById("base1").value, 10)

Alessio Cantarella · Accepted Answer · 2021-01-23 14:14:48Z

document.getElementById().value is a string, so when you use the + operator it will concatenate the two operands. In your case, you should convert strings to numbers (e.g. with the Number function):

function solveArea() {
  let base1 = Number(document.getElementById("base1").value);
  let base2 = Number(document.getElementById("base2").value);
  let height = Number(document.getElementById("height").value);
  let area = (base1 + base2) / 2 * height;
  document.getElementById("area").value = area;
}

<form>
  <input id="base1" type="number" placeholder="Base 1">
  <input id="base2" type="number" placeholder="Base 2">
  <input id="height" type="number" placeholder="Height">
  <input id="area" type="number" readonly placeholder="Area">
  <input id="calculate" type="button" value="Calculate" onclick="solveArea()">
  <input type="reset" value="Clear">
</form>

Kartik Malik · Accepted Answer · 2021-01-23 14:12:07Z

0

your code is not running multiple times, the problem is when you do

base1= document.getElementById("base1").value;
base2= document.getElementById("base2").value;
console.log(base1+base2)

and base1 = 1 and base2 = 1 then the output will be

So you are receiving the value as a string so just convert it to the number and your code will work fine.

function solveArea(){
  var base1, base2, height, area;
  base1= document.getElementById("base1").value;
  base2= document.getElementById("base2").value;
  height= document.getElementById("height").value;
  area = ((+base1 + +base2) / 2)*height;
  document.getElementById("area").value = area;
}

answered Jan 23, 2021 at 14:12

Kartik Malik

5055 silver badges11 bronze badges

Comments

Professor Abronsius · Accepted Answer · 2021-01-23 14:16:40Z

If you parse the input values as numbers using either parseFloat or Number then you should be bale to perform the basic arithmetic operations you need. Without parsing these numbers they were being treated as strings. The issue with parseInt in this regard is that it would prevent you from using numbers such as 5.25 for input ~ it would be treated as 5...

function solveArea() {
  var base1, base2, height, area;
  base1 = Number(document.getElementById("base1").value);
  base2 = Number(document.getElementById("base2").value);
  height = Number(document.getElementById("height").value);
  area = ((base1 + base2) / 2) * height;
  document.getElementById("area").value = area;
}

<form>
  <input id="base1" type="number" placeholder="Base 1">
  <input id="base2" type="number" placeholder="Base 2">
  <input id="height" type="number" placeholder="Height">
  <input id="area" type="number" readonly="" placeholder="Area">
  <input id="calculate" type="button" value="Calculate" onclick="solveArea()">
  <input type="reset" value="Clear">
</form>

Collectives™ on Stack Overflow

Javascript code running function more than once

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related