javascript calculator not getting values from form

Question

The 2 variables in the beginning num1 and num2 are not be grabbed from the HTML form in the JavaScript file.
It does work if I assign the value to the input boxes but not when the user changes the value

I'm new to JavaScript and trying to learn so any help would greatly be appreciated

let num1 = document.getElementById("num1-el").value
let num2 = document.getElementById("num2-el").value

let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")
let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {

  if (calEl.value === "+") {
    sum = num1 + num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  }

})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

score 3 · Accepted Answer · answered Oct 29 '21 at 13:58

Because you are initializing num1 = document.getElementById("num1-el").value at the very beginning (when it's empty), and then never updating it. You have to grab it and num2 after you click the button.

Also you have to convert them to number, because they are strings "2", not numbers 2.

2 + 3 == 5 but "2" + "3" == "23".

let num1;
let num2;

let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")
let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {
  
  num1 = +document.getElementById("num1-el").value;
  num2 = +document.getElementById("num2-el").value;
  
  
  if (calEl.value === "+") {
    sum = num1 + num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  }

})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

if i change .value to .valueAsNumber is will take variables as numbers — Matt Gibble, Oct 29 '21 at 14:12
Ha, I never knew this. In my defence I am an Angular developer and I never use things like `getElementById` or `.value`. Good to know anyway , thanks. — Jeremy Thille, Oct 29 '21 at 14:16

Rana · Answer 2 · 2021-10-29T19:43:33.237

You must take values from input inside the function as a event is needed to take the values (sometimes it is onchange, oninput ...).

As the initial values of input are null means it is empty(on load of script and variables are taking that only). But when you use any event they are filled by now and the updated values will be taken into the variables

Also use Number() to convert string to number

let sum = 0
const submitBtn = document.getElementById("submit-btn")
let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")

submitBtn.addEventListener("click", function() {
  let num1 = document.getElementById("num1-el").value
  let num11 = Number(num1)
  let num2 = document.getElementById("num2-el").value
  let num22 = Number(num2)

  if (calEl.value === "+") {
    sum = num11 + num22
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
  }

})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

Yup it is because you do nothing to convert the values into number — Rana, Oct 29 '21 at 13:55
Yes updated the answer @MaikLowrey as OP has not converted the `object` to `number` . So used a appropriate method to sort it out — Rana, Oct 29 '21 at 13:59
A different issue than Q' but added in a edited answer *thumbs up* — Anuga, Oct 29 '21 at 13:59

score 2 · Answer 3 · answered Oct 29 '21 at 13:58

A couple of things are wrong here:

You want to sample num1 and num2 values when you click the submit button and not when the code loaded.
Since you're using input, the .value is a string so you need to cast it to number with Number().
Instead of sumEl.innerHTML +=, use only sumEl.innerHTML =. Otherwise it will just add another element to the answer.
Since you have the same code <p>The Answer is ${sum}</p>, you can just export it below all of your if else - much cleaner code.
Use variables only when you use them. If you don't need them in high scope - don't define them there just because you can.

let calEl = document.getElementById("cal-el");
let sumEl = document.getElementById("equals-el");
const submitBtn = document.getElementById("submit-btn");

submitBtn.addEventListener("click", function() {
  let sum = 0;
  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);

  if (calEl.value === "+") {
    sum = num1 + num2
  } else if (calEl.value === "-") {
    sum = num1 - num2
  } else if (calEl.value === "*") {
    sum = num1 * num2
  } else if (calEl.value === "/") {
    sum = num1 / num2
  }

  sumEl.innerHTML = `<p>The Answer is ${sum}</p>`


})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<form>
  <input id="num1-el" type="number" value="<? echo $num1; ?>">
  <div>
    <select id="cal-el">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
</form>
<div>
  <button id="submit-btn">Submit</button>
</div>
<div id="equals-el">
</div>

score 0 · Answer 4 · answered Oct 29 '21 at 14:08

First of all, I'd recommend reading something about server/client sided programming to get the difference between languages like Javascript and PHP. A good start might be
What is the difference between client-side and server-side programming?.

To address some of the issues with your code:

the HTML is invalid, not all elements that are opened are also closed. Consider using a linter or validator
value="<? echo $num1; ?>" is php syntax, not needed here.
The <form> is commonly used to progress something, with a custom action. My guess is you can simplify the code by just using the onClick:
You're getting the num1-el and num2-el values before the button is pressed, lets move that inside the onClick so we're sure we have the up-to-date values.
Since . value returns a string, we'll need to use Number() to convert it to a real number
Since you're always doing the sumEl.innerHTML += ..., we can move that outside the if/else to make it somewhat more readable.

const btn = document.getElementById("submit-btn")
btn.addEventListener("click", function() {

  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);

  let calEl = document.getElementById("cal-el")
  let sumEl = document.getElementById("equals-el")
  let sum = 0;

  if (calEl.value === "+") {
    sum = num1 + num2;
  } else if (calEl.value === "-") {
    sum = num1 - num2;
  } else if (calEl.value === "*") {
    sum = num1 * num2;
  } else if (calEl.value === "/") {
    sum = num1 / num2;
  }
  
  sumEl.innerHTML += `<p>The Answer is ${sum}</p>`
});

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

input, select, button {
  width: 100px;
}

<div class='container'>
    <input id="num1-el" type="number">
    <select id="cal-el">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input id="num2-el" type="number">
    <button id="submit-btn">Calculate</button>
    <div id="equals-el">
</div>

Mohamed Reda · Answer 5 · 2021-10-29T14:38:43.383

Any value toke from input, textarea, select or other HTML element using javascript, by default it data type is string until using data type casting (converted to a new variable and another data type) on this value.

Also, You can use switch() instead if() statement, to make your code more clear , and more understable.

const submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function() {
  let sum = 0;
  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);
  let calEl = document.getElementById("cal-el");
  let sumEl = document.getElementById("equals-el");
  switch(calEl.value){
    case "+": {sum = num1 + num2;break;}
    case "-": {sum = num1 - num2;break;}
    case "*": {sum = num1 * num2;break;}
    case "/": {sum = num1 / num2;break;}
    // If the user didn't select the operator (+,-,* or /) then the defualt operator is '+';
    default:  {sum = num1 + num2;break;}
  }
  sumEl.innerHTML += `<p>The Answer is ${sum}</p>`;
});

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

javascript calculator not getting values from form

5 Answers5

Linked