获取值表单输入

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 元素的 name 属性。

这意味着通过输入名称使用它，如下所示：

 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

每当你想用一个查询访问多元素时，你应该尝试使用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()返回一个 NodeList。 当您使用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 开发人员工具的控制台中测试这些命令。 这将使您更好地了解正在选择的元素以及通过调用不同方法返回的值。