我试图为onClick上的每个元素创建一个带tabindex的表，它将激活imageSelector函数（未命名）。我从上一个问题得到了代码，没有命名函数。它与“警报”有关。变体，但我适合我需要检查答案的函数，如果if（answer1.innerHTML ==＆＃34;正确答案＆＃34;）{document.getElementById（＆＃34; correctAnswer＆＃34; ）.addAttribute（＆＃34;显示＆＃34;，＆＃34;内联＆＃34;）}处于活动状态，它将知道答案是设置正确答案，并将使用id =＆＃34设置图像; correctAnswer＆＃34;显示，但是3秒后它应该返回显示=＆＃34;隐藏＆＃34;如果没有选择按钮，则重新激活整个随机序列，这似乎不起作用。我尝试使用setTimeout（）函数在答案正确/不正确时使用它，它会设置一个延迟来调用使图像不可见并重新随机化答案的函数。我将展示代码，并在代码之后重新解释每个部分。
<div id="randomizer">
<div id="wordOutput">
<div id="button">
<!-- This is the button that calls the getRandom() function to create the word. --><button id="myBtn">Randomize!</button><br>
<caption>Click this button to generate a random word!
</caption>
<!-- This is apart of the Randomizer tool, which can be changed to fit the words. It will output the answers based on -->
</button>
</div>
</div>
<div id="answers" class="answers">
<table>
<p id="outputNumber" class="outputNumber">Your word will go here; Click the Randomize Button!</p>
<tr>
<td class="output" id="output1" tabindex="1"></td>
<td class="output" id="output2" tabindex="1"></td>
<td class="output" id="output3" tabindex="1"></td>
</tr>
<tr>
<td class="output" id="output4" tabindex="1"></td>
<td class="output" id="output5" tabindex="1"></td>
<td class="output" id="output6" tabindex="1"></td>
</tr>
<tr>
<td class="output" id="output7" tabindex="1"></td>
<td class="output" id="output8" tabindex="1"></td>
<td class="output" id="output9" tabindex="1"></td>
</tr>
</table>
</div>
<div id="checkAnswer">
<img id="correctAnswer" src="http://png-1.findicons.com/files/icons/1965/colorcons_smoke/128/checkmark.png" alt="correct" style="position: absolute; left: 100px; display: none;">
<img id="incorrectAnswer" src="http://png-4.findicons.com/files/icons/1008/quiet/128/no.png" alt="incorrect" style="position: absolute; right: 100px; display: none;"
</div>
</div>
这列出了整个序列。 outputNumber是生成数字然后转换为单词的位置。按钮div很简单;它是按钮所在的位置。答案div保存表格，每个元素都配有目标的id，并使用tabindex使其可点击。 checkAnswer div保存两个隐藏的图像。
不是很重要;所有它包含的是Daneden的animate.css（3150行）代码以及10多行用于页面着色......
function getRandomAnswer() {
var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var copy = nums.slice();
for (var i = 0, len = nums.length; i < len; i++) {
var j = Math.floor(Math.random() * copy.length);
var rand = copy[ j ];
// remove from array
copy.splice(j, 1);
// add to output
document.getElementById('output' + (i + 1)).innerHTML = rand;
}
//return gen_nums;
//document.getElementById('output' + (i + 1)).innerHTML = getRandomAnswer();
}
/* Based on that number, the answer will change. Change the values to the answer you want. */
function changeRandomAnswer() {
var answers = document.getElementById("answers");
for(var i = 0, len = answers.children.length; i < len; i++) {
var output = answers.children[i];
var answer = output.innerHTML;
if(answer == "1") {
output.innerHTML = "Answer 1";
}
else if(answer == "2") {
output.innerHTML = "Answer 2";
}
else if(answer == "3") {
output.innerHTML = "Answer 3";
}
else if(answer == "4") {
output.innerHTML = "Answer 4"
}
else if(answer == "5") {
output.innerHTML = "Answer 5"
}
else if(answer == "6") {
output.innerHTML = "Answer 6"
}
else if(answer == "7") {
output.innerHTML = "Answer 7"
}
else if(answer == "8") {
output.innerHTML = "Answer 8"
}
else if(answer == "9") {
output.innerHTML = "Answer 9"
}
}
}
var words = [
{ word: "Fruits A-B", array: ["Apple", "Apricot", "Avacado", "Banana", "Breadfruit", "Bilberry", "Blackberry", "Blackcurrant", "Blueberry"] },
{ word: "Fruits B-C", array: ["Boysenberry", "Cantaloupe", "Currant", "Cherry", "Cherimoya", "Cloudberry", "Coconut", "Cranberry", "Cucumber"] },
{ word: "Fruits D-G", array: ["Damson", "Date", "Dragonfruit", "Durian", "Eggplant", "Elderberry", "Feijoa", "Fig", "Goji berry"] },
{ word: "Fruits G-K", array: ["Gooseberry", "Grape", "Grapefruit", "Guava", "Huckleberry", "Honeydew", "Jackfruit", "Jambul", "Kiwi fruit"] },
{ word: "Fruits K-M", array: ["Kumquat", "Lemon", "Lime", "Loquat", "Lychee", "Mango", "Marion berry", "Melon", "Miracle fruit"] },
{ word: "Fruits M-P", array: ["Mulberry", "Nectarine", "Nut", "Olive", "Orange", "Papaya", "Passionfruit", "Peach", "Pepper"] },
{ word: "Fruits P-Q", array: ["Pear", "Persimmon", "Physalis", "Plum", "Pineapple", "Pomegranate", "Pomelo", "Purple Mangosteen", "Quince"] },
{ word: "Fruits R-T", array: ["Raspberry", "Rambutan", "Salal berry", "Salmon berry", "Satsuma", "Star fruit", "Strawberry", "Tomarillo", "Tomato"] },
{ word: "Fruits U-Z", array: ["Ugli fruit", "Watermelon", "Bell pepper", "Chili pepper", "Clementine", "Mandarine", "Tangerine", "Blood Orange", "Rock Melon"] }
];
/* This function grabs the word that is outputted, then changes the answers based on that word. Change to your liking! */
function grabWord() {
var word = document.getElementById("outputNumber").innerHTML;
var wordIndex;
for (var i = 0; i < words.length; i++) {
if (words[i].word === word) {
wordIndex = i;
break;
}
}
for (var i = 1; i <= 9; i++) {
document.getElementById("output" + i).innerHTML = words[wordIndex].array[i-1];
}
}
/* This function should only have modifications to the CORRECT ANSWER. Modifying anything else will break the whole thing; this checks if the answer is correct or not. */
var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function () {
var word = document.getElementById("outputNumber").innerHTML;
var answer1 = document.getElementById("output1");
var answer2 = document.getElementById("output2");
var answer3 = document.getElementById("output3");
var answer4 = document.getElementById("output4");
var answer5 = document.getElementById("output5");
var answer6 = document.getElementById("output6");
var answer7 = document.getElementById("output7");
var answer8 = document.getElementById("output8");
var answer9 = document.getElementById("output9");
if(word == "Fruits U-Z") {
if(answer1.innerHTML == "Ugli Fruit") {
document.getElementById("correctAnswer").addAttribute("display", "inline")
}
else {
document.getElementById("incorrectAnswer").addAttribute("display", "inline")
}
}
})
}
我尽可能地压缩它，但是对于grabWord（）函数，我必须保持那么长，以便每个单词都可以手动更改答案。它已经设置为现在的目的。
当我点击与最后一部分相匹配的答案时，它会检查是否正确，它什么都不做。所以我检查开发控制台（F12 in-browser）并看到一条错误消息，提示“未捕获的TypeError：undefined不是函数| （匿名函数）
有什么想法吗？
我通常在包括细节/信息方面感到不满。如果您需要更多详细信息，请注意，我将添加可能需要的信息。