how to get variable value for java script from input tag in html

Question

var a = document.f1.getElementsByName('num1');
var b = document.f1.getElementsByName('num2');

function add() {
  alert('The sum is ' + parseInt(a) + parseInt(b));
};

body {
  background-color: #333333;
  color: #e6e6e6;
  font-family: 'Calibri', sans-serif;
  font-size: 100%;
  margin: 0 auto;
}

.addition {
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  display: table;
}

.addition input {
  background-color: #8585ef;
  border: 3px solid;
  border-color: #2f2fef;
  border-radius: 1em;
  color: #ffffff;
  display: table-column;
  padding: .6em;
}

<form class="addition" name="f1">
  <input type="number" name="num1" min="0"> +
  <input type="number" name="num2" min="0">
  <input style="margin-left:.3em;" type="button" name="Add" value="Add" onclick="add();">
</form>

On clicking the add button the alert does not dispay the sum it displays string and undefine variables. How can I fix this, please help with the variable diclaration.

Possible duplicate of [JavaScript get element by name](https://stackoverflow.com/questions/10306129/javascript-get-element-by-name) — Smollet777, Nov 24 '18 at 12:07
Note that you are using getElement**s**ByName which returns an array-like NodeList of elements so you need to specify an index `getElementByName[0].value`. `.value` because you need not an element itself but its value — Smollet777, Nov 24 '18 at 12:10

Smollet777 · Answer 1 · 2018-11-24T12:47:53.077

/*
// you need new values every time so place them inside of the function
var a = document.f1.getElementsByName('num1');
var b = document.f1.getElementsByName('num2');

function add() {
  alert('The sum is ' + praseInt(a) + praseInt(b));
  // plus sign concatenate and transforms all into string
  so you need sum the arguments and THEN + it to the string
};*/
// don't use inline functions, use event listeners
document.getElementsByName('Add')[0].addEventListener('click', add)

function add() {
  var a = document.getElementsByName('num1')[0].value;
  var b = document.getElementsByName('num2')[0].value;
  alert('The sum is ' + (parseInt(a) + parseInt(b)));
};

body {
  background-color: #333333;
  color: #e6e6e6;
  font-family: 'Calibri', sans-serif;
  font-size: 100%;
  margin: 0 auto;
}

.addition {
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  display: table;
}

.addition input {
  background-color: #8585ef;
  border: 3px solid;
  border-color: #2f2fef;
  border-radius: 1em;
  color: #ffffff;
  display: table-column;
  padding: .6em;
}

<form class="addition" name="f1">
  <input type="number" name="num1" min="0"> +
  <input type="number" name="num2" min="0">
  <input style="margin-left:.3em;" type="button" name="Add" value="Add">
</form>

still, it shows 2 alerts with string+num1+num2 and then shows the sum — Nikunj Kumar Nakum, Nov 24 '18 at 12:34
@NikunjKumar oh im dumb. I use another selector all the time and forgot `[0]` myself :) Check now — Smollet777, Nov 24 '18 at 12:42

score 0 · Answer 2 · answered Nov 24 '18 at 12:29

There are many way to get value from input. You can use id, class and etc.

In JavaScript to get value from id you have to write down:

var yourValue = document.getElementById("val1");
alert(yourValue.value);

To get value from class you have to write down:

var yourValue = document.getElementsByClassName("val1");
for (var i = 0; i < yourValue.length; ++i){
    alert(yourValue[i].value);
}

To get value from name you have to write down:

var yourValue = document.getElementsByName("val1");
for (var i = 0; i < yourValue.length; ++i)
{
    alert(yourValue[i].name); // to get current name's name
    alert(yourValue[i].value); // to get val1 value
}

Sonal Borkar · Answer 3 · 2018-11-24T12:58:58.430

-2

There seems to be a spelling mistake in parseInt in the alert call.

var a = document.f1.getElementsByName('num1');
var b = document.f1.getElementsByName('num2');

function add() {
  alert('The sum is ' + praseInt(a) + praseInt(b)); // <= Change praseInt to parseInt
};

Right Way:

var a = document.f1.getElementsByName('num1').value;
var b = document.f1.getElementsByName('num2').value;
alert('num1 is ' + a);
alert('num2 is ' + b);
function add() {
  alert('The sum is ' + (parseInt(a) + parseInt(b)));
};

edited Nov 24 '18 at 12:58

answered Nov 24 '18 at 12:07

Sonal Borkar

531
1
6
12

I missed .value after getElementsByName. Now edited above answer. – Sonal Borkar Nov 24 '18 at 12:59

how to get variable value for java script from input tag in html

3 Answers3