獲取值表單輸入

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 開發人員工具的控制台中測試這些命令。 這將使您更好地了解正在選擇的元素以及通過調用不同方法返回的值。