如何從選定的輸入字段中獲取值（不使用ID）

Question

我嘗試編寫簡單的代碼來猜測耳朵的音符。 我有帶有幾個空輸入字段的選項卡，您需要根據某些旋律在這些字段中輸入正確的數字（對於吉他指板）。 一個按鈕顯示第一音符，另一個按鈕檢查是否輸入正確或錯誤的數字，並依靠它批准或刪除您的數字。

我知道如何使用其ID檢查每個輸入字段，但是我可以按以下方式進行操作：當我按下第二個按鈕時，它從選定的輸入中獲取值並將其與占位符或value屬性進行比較？

這是我的Codepen https://codepen.io/fukenist/pen/BxJRwW腳本部分

     function showfirst() {
 document.getElementById("fst").value = "12" 
}
  function show1other() {
    var snote = document.getElementById("scnd").value;
    if (snote == 9 ){
      document.getElementById("scnd").value = "9";
    }
    else {
      document.getElementById("scnd").value = "";
    }
  }

Answer 1

您可以使用document.querySelectorAll()獲取所有輸入並遍歷它們。

樣品：

 // Get all inputs as an array (actually NodeList, to be precise; but it behaves similar to an array for this use case) var inputs = document.querySelectorAll('input'); // Function to reveal the first input's value function showFirst(){ inputs[0].value = inputs[0].dataset.v; } // Function to check all values and clear input if wrong function checkAll(){ inputs.forEach(function(input){ if(input.dataset.v !== input.value){ // Wrong answer, clear input input.value = ''; } }); } 

 <input data-v="12" size="2" value=""/> <input data-v="9" size="2" value=""/> <input data-v="8" size="2" value=""/> <br/> <button onclick="showFirst()">Show First</button> <button onclick="checkAll()">Check All</button> 

筆記：

1. 我已經使用data-v來存儲正確的答案，而不是存儲placeholder因為該屬性在語義上具有不同的含義
2. 可能不合時宜，但是我的兩分錢：用手寫出整首歌可能會變得乏味。 考慮使用JSON字符串或類似的東西來映射選項卡，並使用模板框架來對齊它們。在設計諸如此類的內容時，可能需要注意一些事項：音符對齊（連續音符，同時音符），時間歌曲中的特殊動作，例如滑動，錘擊等
3. 將吉它弦作為背景元素（作為背景圖像或絕對定位的重疊div）可能是一個更好的主意（因此您不必擔心線條不對齊）

參考：

HTMLElement.dataset

document.querySelectorAll