我试图使用JavaScript来标记＆＃39;英语学生可以使用的填空任务。学生将在文本输入字段中以HTML格式输入答案，如果答案正确，答案左侧的分区将显示勾号或十字。我使用if语句检查答案。我设法让它工作，但仅用于第一次输入。它不会检查多个输入。
这是我为一个输入（但不是多个）工作的代码
<form id='gapfill1' onsubmit="return checkAnswers()">
<div id="gfillsentences">
Please type in the correct preposition, choose from the list on the left:<br><br><br>
As you walk <input type="text" name="prep1" required> this street, you can see:<div class="check" id="check1"></div><br><br>
'Pret A Manger' is <input type="text" name="prep2" required> the entrance of 'The Arches Shopping Arcade'.<div class="check" id="check2"></div><br><br>
The Italian Restaurant, 'L'ulivo', is <input type="text" name="prep3" required> 'Pret A Manger' and 'Herman Ze German'.<div class="check" id="check3"></div><br><br>
There is a large clock <input type="text" name="prep4" required> the entrance to 'The Arches Shopping Arcade'.<div class="check" id="check4"></div><br><br>
<input type="text" name="prep5" required> 'Pret A Manger', there is a pub called 'The Pricess of Wales'.<div class="check" id="check5"></div><br><br>
There is a bin <input type="text" name="prep6" required> 'EAT'.<div class="check" id="check6"></div><br><br>
There is an outdoor terrace <input type="text" name="prep7" required> 'Gordon's Wine Bar'.<div class="check" id="check7"></div><br><br>
There is a Japanese Restaurant <input type="text" name="prep8" required> a public garden.<div class="check" id="check8"></div><br><br>
There is a Shoe-Repair shop <input type="text" name="prep9" required> a 'Starbucks'.<div class="check" id="check9"></div><br><br>
There is a Watersports Shop and a Mini Supermarket <input type="text" name="prep10" required> the railway bridge.<div class="check" id="check10"></div>
</div>
<br><br><br><br>
<div id="buttons">
<input type="button" value="Check Answers" onclick="checkAnswers(gapfill1)"/>
<input type="submit" value="Submit"/>
<input type="reset" value="Clear"/>
</div>
</form>
<script type="text/javascript">
function checkAnswers(form) {
var prep1 = document.forms["gapfill1"]["prep1"].value;
var prep2 = document.forms["gapfill1"]["prep2"].value;
var prep3 = document.forms["gapfill1"]["prep3"].value;
var prep4 = document.forms["gapfill1"]["prep4"].value;
var prep5 = document.forms["gapfill1"]["prep5"].value;
var prep6 = document.forms["gapfill1"]["prep6"].value;
var prep7 = document.forms["gapfill1"]["prep7"].value;
var prep8 = document.forms["gapfill1"]["prep8"].value;
var prep9 = document.forms["gapfill1"]["prep9"].value;
var prep10 = document.forms["gapfill1"]["prep10"].value;
var check1 = document.getElementById("check1");
var check2 = document.getElementById("check2");
var check3 = document.getElementById("check3");
var check4 = document.getElementById("check4");
var check5 = document.getElementById("check5");
var check6 = document.getElementById("check6");
var check7 = document.getElementById("check7");
var check8 = document.getElementById("check8");
var check9 = document.getElementById("check9");
var check10 = document.getElementById("check10");
if (prep1 != "" && prep1 != null) {
if(prep1 == "along") {
check1.style.backgroundImage=
"url('file:///<file address>/tick.jpg')";
return false;
check1.focus;
} else {
check1.style.backgroundImage=
"url('file:///<file address>/cross.jpg')";
return false;
check1.focus;
}
} else {return false; check1.focus;}
if (prep2 != "" && prep2 != null) {
if(prep2 == "opposite") {
check2.style.backgroundImage=
"url('file:///<file address>/tick.jpg')";
return false;
check2.focus;
} else {
check2.style.backgroundImage=
"url('file:///<file address>/cross.jpg')";
return false;
check2.focus;
}
} else {return false; check2.focus;}
if (prep3 != "" && prep3 != null) {
if(prep3 == "between") {
check3.style.backgroundImage=
"url('file:///<file address>/tick.jpg')";
return false;
check3.focus;
} else {
check3.style.backgroundImage=
"url('file:///<file address>/cross.jpg')";
return false;
check3.focus;
}
} else {return false; check3.focus;}
}
</script>
我尝试使用数组来保存用户输入，更正答案并抓住每个部门来更改背景图片：
<script type="text/javascript">
function checkAnswers(form) {
var answers = new Array(10);
answers[0] = "along";
answers[1] = "opposite";
answers[2] = "between";
answers[3] = "above";
answers[4] = "to the left of";
answers[5] = "in front of";
answers[6] = "to the right of";
answers[7] = "opposite";
answers[8] = "next to";
answers[9] = "under";
var uInput = new Array(10);
uInput[0] = document.forms["gapfill1"]["prep1"].value;;
uInput[1] = document.forms["gapfill1"]["prep2"].value;
uInput[2] = document.forms["gapfill1"]["prep3"].value;
uInput[3] = document.forms["gapfill1"]["prep4"].value;
uInput[4] = document.forms["gapfill1"]["prep5"].value;
uInput[5] = document.forms["gapfill1"]["prep6"].value;
uInput[6] = document.forms["gapfill1"]["prep7"].value;
uInput[7] = document.forms["gapfill1"]["prep8"].value;
uInput[8] = document.forms["gapfill1"]["prep9"].value;
uInput[9] = document.forms["gapfill1"]["prep10"].value;
var marker = new Array(10);
marker[0] = document.getElementById("check1");
marker[1] = document.getElementById("check2");
marker[2] = document.getElementById("check3");
marker[3] = document.getElementById("check4");
marker[4] = document.getElementById("check5");
marker[5] = document.getElementById("check6");
marker[6] = document.getElementById("check7");
marker[7] = document.getElementById("check8");
marker[8] = document.getElementById("check9");
marker[9] = document.getElementById("check10");
for (var i = 0; i < answers.length; i++) {
if (uInput[i] != "" && uInput[i] != null) {
if (uInput[i] == answers[i]) {
marker[i].style.backgroundImage=
"url('file:///<file address>/tick.jpg')";
return false;
marker[i].focus;
} else {
marker[i].style.backgroundImage=
"url('file:///<file address>/cross.jpg')";
return false;
marker[i].focus;
}
} else {return false; marker[i].focus;}
}
}
任何人都可以看到我在哪个版本出错（第二个版本更整洁，需要的代码更少）