获取值表单输入

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.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 2

document.getElementsByName 不代表使用输入 HTML 元素的 name 属性。

这意味着通过输入名称来使用它：

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

但它不适合你，因为它将所有三个元素，你可以使用document.getElementById. 请找到下面的例子：

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

console.log(inputNum) 

Answer 3

当您想通过一个查询访问多个元素时，您应该尝试使用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
      />

Answer 4

document.querySelectorAll() 返回一个节点列表。当您使用document.querySelectorAll('input') 时，所有三个节点都将以 NodeList 格式返回：

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

其中 # 表示元素的 id，而 .表示元素的类。然后可以通过使用它们的索引来访问各个元素。即document.querySeletorAll('input')[0] 会给你 NodeList 中的第一个元素，document.querySeletorAll('input')[1] 会给你第二个元素，等等。索引也可以定义为常量，所以它比使用 0、1、2 更容易阅读。
例如，const cost = 0, document.querySelectorAll('input')[cost]。

您可以在 Chrome 开发者工具的控制台中测试这些命令。这将使您更好地了解您正在选择的元素以及通过调用不同的方法返回的值。