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]将是共享类的元素的索引。

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

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

Answer 3

使用你提供的html循环是不正确的。

由于您在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循环的中间部分也应该返回truthy，这意味着它应该计算为true或false＆＃34; i = 4＆＃34;永远不会因为=是一个赋值运算符，你应该使用评估运算符＆gt;，＆lt;，＆gt; =，==等。

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";
        }
    }

另外你正在使用＆＃34;结果＆＃34;像这里的一个变量：

results.concat(i)

所以结果需要是一个包含字符串＆＃34;结果＆＃34;的变量。我怀疑是这样的。所以我们通过这种方式告诉getElementById方法

document.getElementById("results" + i)

是找到ID为＆＃34;结果＆＃34;的元素。加上循环的索引，例如。 id =＆＃34; result0＆＃34;，或id =＆＃34; result1＆＃34;等

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/

如何使用变量引用文本框

5 个答案: