How to get HTML input values in Javascript correctly?

Question

I have two HTML input elements. I need to get an output by add those input values together. I created a JavaScript function to do that but, the output is "NaN" always.

HTML:

<input type="text" id="value1" /> <br/>
<input type="text" id="value2" /> <br/>
<button id="button1" onclick="calc()">Calculate</button>
<p id="result"></p>

JavaScript:

function calc()
{
    var x1 = document.getElementById('value1');
    var x2 = document.getElementById('value2');
    var r = x1+x2;
    document.getElementById('result').innerHTML=r;
}

How do I get the real output here?

Start using jQuery. It easy and fast to learn – manian May 12 '17 at 00:36 — manian, May 12 '17 at 00:36

score 3 · Answer 1 · answered May 12 '17 at 00:03

You need to get the value attribute of the input. document.getElementById returns a reference to the input itself. Also, avoid using the onclick attribute, it is better to separate the logic from the HTML with addEventListener.

This code uses parseInt to convert the value from the inputs to a number. You could also use parseFloat. The isNaN check ensures both submitted values are numeric. isNaN returns true if the value it tests is not a number.

document.getElementById("button1").addEventListener("click", function(evt) {
      var x1 = parseInt(document.getElementById('value1').value);
      var x2 = parseInt(document.getElementById('value2').value);
      if (isNaN(x1) || isNaN(x2)) {
        alert('Both values must be numeric');
      } else {
        document.getElementById('result').textContent = x1 + x2;
      }
    });

<input type="text" id="value1" /> <br/>
<input type="text" id="value2" /> <br/>
<button id="button1">Calculate</button>
<p id="result"></p>

score 0 · Accepted Answer · answered May 11 '17 at 23:58

0

just edit the variables x1 and x2 into:

var x1 = document.getElementById('value1').value;
var x2 = document.getElementById('value2').value;

answered May 11 '17 at 23:58

Thanx It worked – Sachini Prasadika May 12 '17 at 00:05
This leaves the web page open to cross-site scripting attacks. Imagine if someone gave value1 an input of ``. You also need to check that the input is a valid number. – Jack Taylor May 12 '17 at 00:16
1

Thanx, but I just needed to edit my code to work it and this solved it. My task is very small one so I need only a few code. – Sachini Prasadika May 12 '17 at 00:20
Is this code on a publicly viewable website? If so, you need to secure it, or you are putting your users at risk. – Jack Taylor May 12 '17 at 00:47
No this is just for testing purpose. I'll add validation methods later :) – Sachini Prasadika May 12 '17 at 08:07

How to get HTML input values in Javascript correctly?

2 Answers2