从输入值获取值

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（），

让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.getElementsByName并不意味着使用输入的HTML元素的名称属性。

它的意思是通过这样的输入名称使用它：

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

但是它并没有用，因为它将使用所有三个元素，可以使用document.getElementById.，请在下面的示例中找到：

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

console.log(inputNum) 

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

getElementsByName()和querySelectorAll()都返回集合，您可以使用索引或在它们之间循环访问它们的值：

document.querySelectorAll('.input.money').forEach(function(el){
  el.addEventListener('input', function(){
    let inputNum = parseInt(this.value)
    console.log(inputNum)// result is NaN
  });
});

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

[每当您要使用一个查询访问多个元素时，都应尝试使用class而不是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
      />