获取值表单输入

Question

I am learning Javascript and trying to get user input value from input.

In my project, I have a few inputs form and want to get the number value from each input. I saw some questions asking similar stuff, and I tried some DOM but none of them worked to my code.

I tried document.getElementsByName()

let userInput =      document.getElementsByName('moneyamount');
inputNum = parseInt(userInput.value);

console.log(inputNum); //result is NaN

I also tried document.querySelector()

let userInput =     document.querySelector('#money-amount');
inputNum = parseInt(userInput.value);

console.log(inputNum) 

which worked perfect, but I need to get value from a few inputs, so querySelector will not be good for this situation. so I tried document.querySelectorAll() as well, however,

let userInput = document.querySelectorAll('#money-amount'); inputNum = parseInt(userInput.value)

console.log(inputNum)// result is NaN

I am not sure what DOM I should use in this situation. I need to select all elements and need to get value from them.

This is my HTML of input.

      <input
        class="input money"
        type="number"
        id="money-amount"
        placeholder="Enter amount"
        name="moneyamount"
        required
      />
      <input
        class="input money"
        type="number"
        id="money-amount1"
        placeholder="Enter amount"
        name="moneyamount"
        required
      />
      <input
        class="input money"
        type="number"
        id="money-amount2"
        placeholder="Enter amount"
        name="moneyamount"
        required
      />

I hope you guys could help this problem.

Thank you so much!

Answer 1

document.getElementsByName doesnot mean use the name attribute of input HTML element.

It mean use it by input name like this:

 let userInput = document.getElementsByName('input');

But its not of your use because it will all the three elements, You can use document.getElementById. Please find the example below:

let userInput = document.getElementsByName('money-amount');
inputNum = parseInt(userInput.value);

console.log(inputNum) 

Answer 2

That is because document.querySelectorAll() returns a NodeList. That means that you need to iterate through the list before attempting to access the value of individual elements. Since all your input elements have the class input money , then you can use the selector to retrieve all their values:

let userInputs = document.querySelectorAll('.input.money');

userInputs.forEach(userInput => {
  console.log(parseInt(userInput.value));
});

To collect all their values, you will likely have to map them to an array, for which you can do this:

let userInputs = document.querySelectorAll('.input.money');

let values = Array.from(userInputs).map(userInput => parseINt(userInput.value));
console.log(values);

See proof-of-concept example:

 document.querySelector('#btn').addEventListener('click', () => { let userInputs = document.querySelectorAll('.input.money'); userInputs.forEach(userInput => { console.log(parseInt(userInput.value)); }); let values = Array.from(userInputs).map(userInput => parseInt(userInput.value)); console.log(values); });

 <input class="input money" type="number" id="money-amount" placeholder="Enter amount" name="moneyamount" required value="123" /> <input class="input money" type="number" id="money-amount1" placeholder="Enter amount" name="moneyamount" required value="456" /> <input class="input money" type="number" id="money-amount2" placeholder="Enter amount" name="moneyamount" required value="789" /> <button type="button" id="btn">Get money amounts</button>

Answer 3

Whenever you want to access multiple-element with one query you should try to use the class not id or name

id & name should be unique in each page

 var allMoney = document.getElementsByClassName("money"); console.log(allMoney[0].value); console.log(allMoney[1].value); console.log(allMoney[2].value);

 <input class="input money" type="number" id="money-amount" placeholder="Enter amount" name="moneyamount" value="1" required /> <input class="input money" type="number" id="money-amount1" placeholder="Enter amount" name="moneyamount" value="2" required /> <input class="input money" type="number" id="money-amount2" placeholder="Enter amount" name="moneyamount" value="3" required />

Answer 4

document.querySelectorAll() returns a NodeList. When you use document.querySelectorAll('input') , all three nodes will return in a NodeList format:

[input#money-amount.input.money, input.#money-amount1.input.money, input#money-amount2.input.money]

Where # represents the id of the element and . represents the class of the element. The individual elements can then be accessed by using their indexes. ie document.querySeletorAll('input')[0] would give you the first element in the NodeList, document.querySeletorAll('input')[1] would give you the second element, etc. The indexes can also be defined as constants so its much easier to read than using 0,1,2.
For example, const cost = 0, document.querySelectorAll('input')[cost] .

You can test the commands out within the console of the Chrome Developer tools. This will give you a better visual of what elements you're selecting and what values are returning by calling different methods.