如何使用变量引用文本框

Question

因此，我第一次进行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重复了相同的代码）：

<input type="text" id="0" value="a, b or c"><br>
<input type=button value="Check" onClick="check()"><br>
Result: <span id="results0"></span><br><br>

Answer 1

如果所有这些都在<div>或div标记内，则可以使用：nth-​​child表示法引用它们。 这通过从头开始引用第n个孩子来工作。

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

Answer 2

遍历id的感觉对我来说很脏。 从维护和可读性的角度来看，我建议您改为遍历节点集合。

我相信您正在寻找：

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

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

这是我编写的代码示例，供您使用文本框供您参考，并将值输出到for循环内的div中。

https://jsfiddle.net/4ocnyy38/1/

Answer 3

使用您提供的HTML，for循环不正确。

由于您从0开始输入，因此您想从0开始循环。

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

您的<span>标记也需要用</span>关闭

Answer 4

这应该可以工作：原始代码有些错误

错误：

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

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

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.concat(i)

因此，结果需要是一个包含字符串“结果”的变量，我怀疑情况确实如此。 所以我们通过这种方式告诉getElementById方法

document.getElementById("results" + i)

是找到一个ID为“结果”的元素加上循环索引，例如。 id =“ result0”或id =“ result1”等。

Answer 5

您可以动态创建输入框，并为其生成跨度和大量动态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";
        }
    }
}

HTML：

<div id="inject">

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

演示： https : //jsfiddle.net/9ea46of5/