Why is returning NaN?

Question

I'm trying to multiply 2 numbers and i get NaN as result, why?

function myFunction() {
  var x = document.getElementsByClassName("input1").value;
  var y = document.getElementsByClassName("input2").value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 1

Because when using getElementsByClassName you get an array-like object returned and need to specify the element similar to the way you specify the index of an array element, e.g. getElementsByClassName("input1")[0] . If you were using a unique identifier, like an ID, then you wouldn't need to worry about that.

Try:

function myFunction() {
  var x = document.getElementsByClassName("input1")[0].value;
  var y = document.getElementsByClassName("input2")[0].value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 2

It's because getElementsByClassName doesn't return an HTML object like jQuery, it returns an HTML collection(array like), and you have to use document.getElementsByClassName("input1")[0] to access the element:

function myFunction() {
  var x = document.getElementsByClassName("input1")[0].value;
  var y = document.getElementsByClassName("input2")[0].value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Document.getElementsByClassName(): Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

You can read more about this here.

Answer 3

You are using getElementsByClassName which return a collection. You need to refer the 0 index to get it's value. Else you can use id attribute

function myFunction() {
  var x = document.getElementsByClassName("input1")[0].value;
  var y = document.getElementsByClassName("input2")[0].value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 4

Your problem is because document.getElementsByClassName returns an array. If you want to add together the values of 2 specific text boxes you're much better referring to them by unique IDs. I've changed the inputs to have unique id attributes, and the code to use document.getElementById which returns a single element uniquely identified by its ID.

function myFunction() {
  var x = document.getElementById("input1").value;
  var y = document.getElementById("input2").value;
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}

<input type="text" id="input1">
<input type="text" id="input2">
<button onclick="myFunction()">Submit</button>
<br>
<p id="results">Results</p>

Answer 5

This is because document.getElementsByClassName("input1").value; returns a string/text value. Which makes this var result = x * y; impossible since you cannot perform arithmetic operations on text. To solve this problem do this little manipulation

var x = parseInt(document.getElementsByClassName("input1").value);
  var y = parseInt(document.getElementsByClassName("input2").value);
  var result = x * y;
  document.getElementById("results").innerHTML = result;

Answer 6

If you are trying to get a single element, then getElementsByClassName is not the correct method to call because it returns a "live" node list of elements, which is excessive, even in situations where you do want a list of elements.

Instead, since your input elements can be individually identified by the different classes they each use, querySelector() is the correct way to get your hands on each of them, individually.

Additionally, don't use inline HTML event handling attributes (onclick, etc.), here's why.

Now, even when you do get your hands on just the individual elements in question, all HTML elements contain just one type of data, strings. You must convert those strings into numbers before doing math on them.

// Get a reference to the button
var btn = document.getElementById("calc");

// Set up a click event handler for the button
btn.addEventListener("click", myFunction);

function myFunction() {
  // Get just the single elements you need and then trim any leading
  // or trailing spaces off of the user's input and then convert that
  // input into a number:
  var x = parseFloat(document.querySelector(".input1").value.trim());
  var y = parseFloat(document.querySelector(".input2").value.trim());
  var result = x * y;
  
  // Don't use innerHTML when you are suppling HTML as the value
  // use textContent instead. This will perform better.
  document.getElementById("results").textContent = result;
}

<input type="text" class="input1">
<input type="text" class="input2">
<button id="calc">Calculate</button>
<br>
<p id="results">Results</p>

Answer 7

You are trying to multiply two string. Do this

function myFunction() {
  var x = parseInt(document.getElementsByClassName("input1").val());
  var y = parseInt(document.getElementsByClassName("input2").val());
  var result = x * y;
  document.getElementById("results").innerHTML = result;
}