如何使用变量引用文本框

Question

So I am making a small quiz on JavaScript for the first time. I wanted the user to be able to select between 3 options(a, b and c) by entering the letter in a text box and clicking a button to check the answer. A text will then appear underneath the text box to show whether the user entered the right option or not.

I have managed to make this work but since there are multiple questions, I wanted to use a for loop to loop through each text box (I named each text box "0", "1" ...) but I cannot reference them using i . How can I do it?

Here is my 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";
        }
    }
}

Here is the HTML (I repeated the same code for each question with a different 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

If you have all of these within a <div> or div tag you can reference them using :nth-child notation. This works by referencing the nth child from the beginning.

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

Answer 2

Looping through id's feels very dirty to me. From a maintenance and readability standpoint, I recommend you loop through a collection of Nodes instead.

I believe that you are looking for:

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

Where [0] Would be the index of the element whos class is shared.

Here is a code sample I wrote for you to reference using textboxes and outputting the values into a div within a for loop.

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

Answer 3

With the html you provided your for loop is incorrect.

Since you started your input at 0 you want to start looping at 0.

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

Your <span> tag also need to be closed with a </span>

Answer 4

This should work: There are a few things wrong with your original code

Wrong:

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

usually we start our iterations on 0 index, also the middle portion of the for loop should return truthy which means it should evaluate to true or false "i = 4" will never be either because = is an assignment operator, you should use evaluation operators >, <, >=, ==, etc.

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

Additionally you were using "result" like a variable in this:

results.concat(i)

So results would need to be a variable that contains the string "results" which I doubt is the case. so what we are telling the getElementById method by doing it this way

document.getElementById("results" + i)

is to find an element with an ID of "results" plus the index of the loop eg. id="result0", or id="result1" etc.

Answer 5

You can dynamically create inputbox and result span and alot dynamic ids to them and then check the correct answer on click of button

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>

Demo: https://jsfiddle.net/9ea46of5/