Wie referenziere ich Textfelder mit einer Variablen

Question

Also mache ich ein kleines Quiz über JavaScript zum ersten Mal. Ich wollte, dass der Benutzer zwischen 3 Optionen (a, b und c) wählen kann, indem er den Buchstaben in ein Textfeld eingibt und auf eine Schaltfläche klickt, um die Antwort zu überprüfen. Ein Text wird dann unter dem Textfeld angezeigt, um anzuzeigen, ob der Benutzer die richtige Option eingegeben hat oder nicht.

Ich habe es geschafft, diese Arbeit zu machen, aber da es mehrere Fragen gibt, wollte ich eine for Schleife verwenden, um jedes Textfeld (ich nannte jedes Textfeld "0", "1" ...) aber ich Sie können sie nicht mit i referenzieren. Wie kann ich es tun?

Hier ist mein 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"; 
     } 
    } 
} 

Hier ist der HTML (ich den gleichen Code für jede Frage mit einer anderen ID wiederholt):

<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

geschlossen werden müssen, Dies sollte funktionieren: Es gibt ein paar Dinge falsch mit Ihrem ursprünglichen Code

falsch:

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

normalerweise beginnen wir unsere Iterationen auf Index 0, auch der mittlere Teil der for-Schleife sollte truthy zurückkommen, was bedeutet, dass es wahr oder falsch auswerten sollte "i = 4" wird nie sein, denn = ist ein Zuweisungsoperator, sollten Sie Benutze Bewertungsoperatoren>, <,> =, ==, 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"; 
     } 
    } 

Zusätzlich waren Sie „Ergebnis“ wie eine Variable in dieser Verwendung:

results.concat(i) 

So Ergebnisse sein müsste eine Variable, die die Zeichenfolge „Ergebnisse“ enthält, die ich bezweifle, der Fall ist. so, was wir die getElementById Methode erzählen, indem sie es auf diese Weise tun

document.getElementById("results" + i) 

ist ein Element mit der ID „Ergebnisse“ plus dem Index der Schleife zum Beispiel zu finden. id = „result0“ oder id = „result1“ usw.

Answer 2

Wenn Sie alle diese innerhalb eines haben <div> oder div-Tag Sie können sie verweisen mit: Nth-Kind-Notation. Dies funktioniert, indem von Anfang an auf das n-te Kind Bezug genommen wird.

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

Answer 3

Looping durch ids fühlt sich sehr schmutzig zu mir. Aus Gründen der Wartung und Lesbarkeit empfehle ich Ihnen, stattdessen eine Sammlung von Knoten zu durchlaufen.

Ich glaube, dass Sie suchen,:

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

Wo [0] Würde der Index des Elements sein whos Klasse geteilt wird.

Hier ist ein Codebeispiel, das ich für Sie geschrieben habe, um mithilfe von Textfeldern zu referenzieren und die Werte in einem div innerhalb einer for-Schleife auszugeben.

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

Answer 4

mit dem HTML Sie Ihre for-Schleife ist nicht korrekt.

Da Sie Ihre Eingabe bei 0 beginnen möchten Sie bei 0.

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

Ihr <span> Tag Looping beginnen ebenfalls mit einem </span>

Answer 5

Sie dynamisch inputbox und Ergebnis Spannweite und eine Menge dynamische ids ihnen erstellen und dann überprüfen Sie die richtige Antwort auf Schaltfläche anklickt

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/