How can I access these form values?

user_17290897 0
Viewed 93

I want to create a form where I will perform an operation with the values entered by the user, but when the function runs, I get NaN return. Thank you in advance for the help.

function test() {
  var age = document.getElementsByName("person_age").value;
  var weight = document.getElementsByName("person_weight").value;
  var size = document.getElementsByName("person_size").value;
  document.getElementById("result").innerHTML = weight + size + age;
}
<form>
  <input type="text" name="person_age">
  <input type="text" name="person_size">
  <input type="text" name="person_weight">
  <input type="button" value="calculate" onclick="test();">
</form>
<h3 id="result"></h3>`

Output:

NaN

When I get the values from the user and run the function, I get NaN feedback. how can i solve this problem.

function html javascript
3 Answers

There are multiple errors that you have to correct

1) When you use getElementsByName, It will return NodeList array like collection. So you have to get the element by using index as:

var age = document.getElementsByName( "person_age" )[0].value;

2) If you need sum of all three value then you have to convert it into Number type because document.getElementsByName( "person_age" )[0] give you value in String type. So you can do as:

+document.getElementsByName( "person_age" )[0].value


function test() {
  var age = +document.getElementsByName("person_age")[0].value;
  var size = +document.getElementsByName("person_size")[0].value;
  var weight = +document.getElementsByName("person_weight")[0].value;

  document.getElementById("result").innerHTML = weight + size + age;
}
<form>
  <input type="text" name="person_age">
  <input type="text" name="person_size">
  <input type="text" name="person_weight">
  <input type="button" value="calculate" onclick="test();">
</form>
<h3 id="result"></h3>

user_91534480

Just a Suggestion: You can use Document.getElementById if you want to directly access the value. Just add an ID property in your element. It will return a string value, convert that to int and you're good to go.

function test() {
  var age = document.getElementById("person_age").value;
  var weight = document.getElementById("person_weight").value;
  var size = document.getElementById("person_size").value;
  document.getElementById("result").innerHTML = parseInt(weight) + parseInt(size) + parseInt(age); 
}
<form>
  <input type="text" name="person_age" id="person_age">
  <input type="text" name="person_size" id="person_size">
  <input type="text" name="person_weight" id="person_weight">
  <input type="button" value="calculate" onclick="test();">
</form>
<h3 id="result"></h3>

user_101174330

  1. getElementsByName will always return an array-like nodelist so, if you were to use it you would need to access the first index [0]. Instead add a class to each input and use querySelector to target it.

  2. The value of an input will always be a string (even if the input is type "number"), so you need to coerce it to a number, either by using Number or by prefixing the value with +.

So, in this example I've updated the HTML a little by adding classes to the inputs, and changing their type to "number", and removing the inline JS, and updated the JS so that the elements are cached outside of the function, an event listener is added to the button, and the values are correctly calculated.

// Cache all the elements using querySelector to target
// the classes, and add an event listener to the button
// that calls the function when it's clicked
const ageEl = document.querySelector('.age');
const weightEl = document.querySelector('.weight');
const sizeEl = document.querySelector('.size');
const result = document.querySelector('#result');
const button = document.querySelector('button');

button.addEventListener('click', test, false);

function test() {

  // Coerce all the element values to numbers, and
  // then display the result
  const age = Number(ageEl.value);
  const weight = Number(weightEl.value);
  const size = Number(sizeEl.value);

  // Use textContent rather than innerHTML
  result.textContent = weight + size + age;
}
<form>
  <input type="number" name="age" class="age" />
  <input type="number" name="size" class="size" />
  <input type="number" name="weight" class="weight" />
  <button type="button">Calculate</button>
</form>

<h3 id="result"></h3>`

user_13770020
Related