Получить значение формы ввода

Question

Я изучаю Javascript и пытаюсь получить пользовательское значение ввода от ввода.

В моем проекте у меня есть несколько форм ввода и я хочу получить числовое значение от каждого ввода. Я видел некоторые вопросы, задающие подобные вещи, и я попробовал некоторые DOM, но ни один из них не работал с моим кодом.

Я попробовал document.getElementsByName ()

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

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

Я также попробовал document.querySelector ()

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

console.log(inputNum) 

, который работал отлично, но мне нужно получить значение из нескольких входных данных, поэтому querySelector не подойдет для этой ситуации. поэтому я попробовал document.querySelectorAll (), однако,

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

console.log (inputNum) // результат - NaN

Я не уверен, какой DOM мне следует использовать в этой ситуации. Мне нужно выбрать все элементы и получить от них значение.

Это мой HTML ввод.

      <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
      />

Я надеюсь, что вы, ребята, могли бы помочь с этой проблемой.

Спасибо большое!

Answer 1

document.querySelectorAll() возвращает NodeList. Когда вы используете document.querySelectorAll('input'), все три узла будут возвращаться в формате NodeList:

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

Где # представляет идентификатор элемента и. представляет класс элемента. Затем к отдельным элементам можно получить доступ, используя их индексы. то есть document.querySeletorAll('input')[0] даст вам первый элемент в NodeList, document.querySeletorAll('input')[1] даст вам второй элемент, et c. Индексы также могут быть определены как константы, поэтому их гораздо проще читать, чем с помощью 0,1,2.
Например, const cost = 0, document.querySelectorAll('input')[cost].

Вы можете проверить команды в консоли инструментов разработчика Chrome. Это даст вам лучшее представление о том, какие элементы вы выбираете и какие значения возвращаете, вызывая различные методы.

Answer 2

Это потому, что document.querySelectorAll() возвращает NodeList. Это означает, что вам нужно перебрать список, прежде чем пытаться получить доступ к значению отдельных элементов. Поскольку все ваши входные элементы имеют класс input money, вы можете использовать селектор для извлечения всех их значений:

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

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

Чтобы собрать все их значения, вам, вероятно, придется сопоставить их с массивом, для чего вы можете сделать это:

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

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

См. пример проверки концепции:

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

Всякий раз, когда вы хотите получить доступ к нескольким элементам одним запросом, вы должны попытаться использовать class not id или name

id & name, которые должны быть уникальными на каждой странице

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.getElementsByName не означает использование атрибута имени элемента input HTML.

Это означает использование его по имени ввода следующим образом:

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

Но это не для вашего использования потому что это будет все три элемента, вы можете использовать document.getElementById. Пожалуйста, найдите пример ниже:

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

console.log(inputNum)