Javascript 如何使用变量引用文本框

所以我第一次做了一个关于JavaScript的小测验。我希望用户能够通过在文本框中输入字母并单击按钮来检查答案，从而在3个选项（a、b和c）之间进行选择。然后，文本框下方会出现一个文本，显示用户是否输入了正确的选项

我已经设法做到了这一点，但由于存在多个问题，我想使用

for

循环遍历每个文本框（我将每个文本框命名为“0”、“1”…），但我无法使用

I

引用它们。我怎么做

以下是我的JavaScript：

var answer = ["a", "b", "c"];
var results = "results"

function check() {
    for (i = 1; i = 4; i++) {
        var input = document.getElementById(i).value;

        if (input == answer[parseInt(i-1)]) {
            document.getElementById(results.concat(i)).innerHTML = "Correct";
        }
        else {
            document.getElementById(results.concat(i)).innerHTML = "Wrong";
        }
    }
}

下面是HTML（我用不同的ID为每个问题重复了相同的代码）：

结果：

如果所有这些都在

或div标记中，则可以使用：n子表示法引用它们。这通过从一开始就引用第n个子项来实现

$("div:nth-child(i)");

---

在id中循环对我来说感觉很脏。从维护和可读性的角度来看，我建议您通过节点集合进行循环。

我相信您正在寻找：

document.getElementsByClassName("someClass")[0];

其中[0]将是共享其类的元素的索引

下面是我编写的代码示例，供您使用文本框引用，并将值输出到for循环中的div中

---

您为for循环提供的html不正确

由于您从0开始输入，因此希望从0开始循环

for (i = 0; i <= 2; i++) { //with three values 0,1,2
  ...
}

对于（i=0；i这应该有效：
您的原始代码有一些错误

错：

for (i = 1; i = 4; i++)

通常我们从0索引开始迭代，for循环的中间部分也应该返回truthy，这意味着它应该计算为true或false“i=4”永远不会是true或false，因为=是赋值运算符，您应该使用求值运算符>，=，=，等等

for (i = 0; i < 3; i++) {
        var input = document.getElementById(i).value;

        if (input == answer[i]) {
            document.getElementById("results" + i).innerHTML = "Correct";
        }
        else {
            document.getElementById("results" + i).innerHTML = "Wrong";
        }
    }

所以results需要是一个包含字符串“results”的变量，我对此表示怀疑

document.getElementById("results" + i)

就是找到一个ID为“results”加上循环索引的元素，例如ID=“result0”或ID=“result1”等。
您可以动态创建输入框、结果范围和许多动态ID，然后单击按钮检查正确答案

Javascript:

var answer = ["a", "b", "c"];
var results = "results";
setTimeout(function(){
var injectData='';
for(var i=0;i<3;i++){
injectData+="<input type='text' id='id_"+i+"' placeholder='a, b or c'/> Result: <span id='results_"+i+"'></span><br/>";
}
document.getElementById('inject').innerHTML=injectData;
},500);
function check() {
    for (i = 0; i <3; i++) {
        var input = document.getElementById('id_'+i).value;

        if (input == answer[i]) {
            document.getElementById("results_"+i).innerHTML = "Correct";
        }
        else {
            document.getElementById("results_"+i).innerHTML = "Wrong";
        }
    }
}

var-answer=[“a”、“b”、“c”]；
var results=“results”；
setTimeout（函数（）{
var数据=“”；
对于（var i=0；我请包含HTML。我们需要了解您是如何识别元素的。海报中没有提到使用jQuery。jQuery被标记了，对吗？如果没有，我道歉，我将删除我的帖子。@Alan-原来的帖子是这样做的，但他删除了它。谢谢，这很有效。但是，我仍然收到一条错误消息。有什么想法吗？下面是第8行的错误“JavaScript error:TypeError:null不是对象（计算'document.getElementById（i）.value'）在document.getElementById（i）.value正在查找ID为“i”的元素。因此假设i为0，则该元素必须为ID=“0”为了找到它。这有意义吗？我想我可能知道这里发生了什么。你可能在寻找一个不存在的元素。如果你有3个元素0，1，2，那么你在寻找3个不存在的元素，你会得到错误。请参阅我对循环中答案I<3的编辑。是的，这太完美了！非常感谢你接受正确的answer那会对社区有帮助。谢谢
document.getElementById("results" + i)

var answer = ["a", "b", "c"];
var results = "results";
setTimeout(function(){
var injectData='';
for(var i=0;i<3;i++){
injectData+="<input type='text' id='id_"+i+"' placeholder='a, b or c'/> Result: <span id='results_"+i+"'></span><br/>";
}
document.getElementById('inject').innerHTML=injectData;
},500);
function check() {
    for (i = 0; i <3; i++) {
        var input = document.getElementById('id_'+i).value;

        if (input == answer[i]) {
            document.getElementById("results_"+i).innerHTML = "Correct";
        }
        else {
            document.getElementById("results_"+i).innerHTML = "Wrong";
        }
    }
}

<div id="inject">

</div>
<input type=button value="Check" onClick="check();"><br>