JavaScript Calculator Error please need fix

Question

I'm trying to do a simple calculator. Here's what I've got:

<script>
  function f1() {
    var x = document.getElementById("num1");
    var y = document.getElementById("num2");
    var z = x + y;
    alert(z);
  }
</script>


<input id="num1" type="text">
<input id="num2" type="text">
<button onclick="f1()">Click</button>

I keep getting an error.

What error? [There's nothing causing errors in your code](http://jsfiddle.net/9phab0Ln/). — Teemu, Sep 13 '15 at 18:14

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

You need to extract the values of those inputs.

function f1() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;
    var z = x + y;
    alert(z);
  }

for detail see here.

edited May 23 '17 at 12:23

Community

1
1

answered Sep 13 '15 at 18:11

thecodeparadox

84,459
21
136
161

score 0 · Accepted Answer · answered Sep 13 '15 at 18:11

x and y are both HTMLElements, not Numbers, so you can't simply add them together. Instead, you want to add their value properties together after you've converted them to Numbers:

var z = parseFloat(x.value) + parseFloat(y.value);

MDN has a good article on JavaScript types that might be helpful: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

JavaScript Calculator Error please need fix

2 Answers2