summing values from input fields

Cybertrucker 0
Viewed 31

I have got two simple input fields.

I tried to sum them up but they seem to be concatenated even though I have used parseFloat function

 <input type="text" id="x"/>
 <input type="text" id="y"/>
 <button id="add">ADD</button>

 <h1 id="displayResult"></h1>

 <script>


  var x = document.getElementById("x");
  var y = document.getElementById("y");
  var add = document.getElementById("add");
  var displayResult = document.getElementById("displayResult");
  x = parseFloat(x);
  y = parseFloat(y);     
  add.addEventListener('click', ()=>{
     displayResult.innerHTML = x.value + y.value
  })

  </script>

javascript html
2 Answers

You just need to parse the value not the element

x = parseFloat(x);// x here not value but the element


var x = document.getElementById("x");
var y = document.getElementById("y");
var add = document.getElementById("add");
var displayResult = document.getElementById("displayResult");
add.addEventListener('click', function() {
  displayResult.innerHTML = parseFloat(x.value) +parseFloat(y.value)
})
<input type="text" id="x" />
<input type="text" id="y" />
<button id="add">ADD</button>
<h1 id="displayResult"></h1>

TAHER El Mehdi0

you need to get value from x & y first before using parseFloat

var x = document.getElementById("x");
var y = document.getElementById("y");
var add = document.getElementById("add");
var displayResult = document.getElementById("displayResult");

add.addEventListener("click", function () {
  x = parseFloat(x.value); // here
  y = parseFloat(y.value); // here
  displayResult.innerHTML = x + y;
});
vuongvu0
Related