时间戳

首页 > 解决方案 > 如何从选定的输入字段中获取值（不使用 id）

javascript - 如何从选定的输入字段中获取值（不使用 id）

问题描述

我尝试编写简单的代码来通过耳朵猜测音符。我有几个空输入字段的选项卡，您需要根据某些旋律在这些字段中输入正确的数字（对于吉他指板）。一个按钮显示第一个注释，另一个按钮检查您是否输入了正确或错误的号码，并根据它批准或删除您的号码。

我知道如何使用其 id 检查每个输入字段，但是我可以这样做，当我按下第二个按钮时，它会从选定的输入中获取值并将其与其占位符或值属性进行比较？

这是我的 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 = "";
    }
  }

标签： javascriptinput

解决方案

您可以使用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

推荐阅读