Question 224935 in Html Question posted in
Some basic documentation can be found here.

Html – after the value is assigned to the variable "NaN" the value does not change

Why is there not assigned value in the line val3.value = parseInt(val1.value + val2.value); the specified value "NaN" cannot be parsed, or is out of range?

var val1 = parseInt(document.getElementById("num1"));
var val2 = parseInt(document.getElementById("num2"));
var val3 = document.getElementById("num3");

document.getElementById("add").addEventListener("click", function() {
  val3.value = parseInt(val1.value + val2.value);
});
<input type="number" id="num1" />
<input type="number" id="num2" />
<input type="number" readonly id="num3" /> <br />
<button id="add">add</button>

the output value not assigned

Tags:

3

Answers


  1. 0

    Replace the script with the following :

    <script>
  var val1 = document.getElementById("num1");
  var val2 = document.getElementById("num2");
  var val3 = document.getElementById("num3");

  document.getElementById("add").addEventListener("click", function () {
    val3.value = val1.valueAsNumber + val2.valueAsNumber;
  });
</script>
    Login or Signup to reply.
  2. 0

    You can use the following:

    const val1 = document.getElementById("num1");
const val2 = document.getElementById("num2");
const val3 = document.getElementById("num3");

document.getElementById("add").addEventListener("click", function() {
  val3.value = val1.valueAsNumber + val2.valueAsNumber;
});
    <input type="number" id="num1" />
<input type="number" id="num2" />
<input type="number" readonly id="num3" /> <br />
<button id="add">add</button>

    Your code has some fatal flaws:

    • You try to parse HTMLInputElements as a string which won’t work and it’s not what you want to do
    • When you have two strings (which two values of inputs are) using + the values will be concatenated, not added meaning "2" + "2" will be "22", not 4.
    console.log("2" + "2");
console.log(2 + 2)
    /* Stackoverflow: show only console */
.as-console-wrapper {
    max-height: 100% !important;
    top: 0;
}

    To address this you want to do two things:

    • remove the parseInt() on the HTML elements
    • use valueAsNumber instead of value since this will give you the value of the <input /> element as a number hence eliminating the need to manually parse the number and doing a concatenation instead of an addition.

    Last but not least, generally, consider using const or let instead of var, since var always declares global variables, which you can cause all kinds of weird problems and bugs once your program grows in size. See Difference between var, let and const keywords in JavaScript

    Login or Signup to reply.
  3. 0

    You’re trying to parse the element itself, not its value, also you’re concatenating the values as strings before parsing them to integers

    var val1 = document.getElementById("num1");
var val2 = document.getElementById("num2");
var val3 = document.getElementById("num3");

document.getElementById("add").addEventListener("click", function() {
  val3.value = parseInt(val1.value) + parseInt(val2.value);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search