Tab索引JavaScript函數未知/未指定錯誤？

Question

通知

我已經在我的alt帳戶上提出過這個問題David Vex;但是該帳戶被激怒了，我無法登錄到它，一個StackOverflow服務器錯誤與胡言亂語談論錯誤：0x12084123其次是服務器亂碼;所以跟進它的唯一方法就是對它進行調整。請原諒不便。從問題

---

報價（Alt鍵賬戶）

可加工CODE

Better than JSFiddle!

我試圖做一個表格，表格中的onClick其中，它會激活每一個元素的tabindex imageSelector功能（未命名）。我從我最後一個問題中得到了代碼，這個代碼沒有命名函數。它適用於'alert'變體，但我適合於我需要檢查答案的函數，如果if（answer1.innerHTML ==「Correct Answer」）{document.getElementById（「correctAnswer」）。addAttribute （「display」，「inline」）}是活動的，它會知道答案是正確的答案，並且會設置圖片的id =「correctAnswer」來顯示，但是3秒後它應該回到顯示=「隱藏」並重新激活整個隨機序列，如果按鈕還沒有被選中，這似乎不起作用。我嘗試使用setTimeout（）函數在答案正確/不正確時使用setTimeout（）函數，它會設置一個延遲來調用將使圖像不可見並重新隨機化答案的函數。我將顯示代碼，並在代碼之後重新解釋每個部分。

HTML

<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保存表格，並且每個元素都與targetting的id匹配，tabindex用於使其可點擊。 checkAnswer div保存兩個隱藏的圖像。

CSS

不是很重要;它包含所有的Daneden的animate.css的代碼（3150線），加上10多個線的頁面的着色...

的JavaScript

/* Has the words and their respectful answers. */ 
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 be working, which it does if the function is something like alert(message) but with the function I need for the image visibility and such, it doesn't work; it doesn't even give me an answer. */ 
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").setAttribute("display", "inline") 
     } 
     else { 
     document.getElementById("incorrectAnswer").setAttribute("display", "inline") 
     } 
    } 
    }) 
} 

我把它濃縮儘可能多地，但對於grabWord（）函數，我必須保持它很長，以便每個單詞可以手動更改答案。它被設置爲現在的例子。

錯誤/問題

當我點擊，將其是否正確與否，它確實沒有什麼會檢查的最後一部分匹配的答案。所以我檢查開發控制檯（F12在瀏覽器中）並查看沒有錯誤。

任何想法？

，請記住

我通常不善於包括細節/信息。如果您需要更多詳細信息，請點評，我將盡可能多地添加信息。

Answer 1

看看你的代碼...它正在工作。但是，您將屬性「display」設置爲「inline」;如果您檢查元素的正確或不正確答案，則不在下面的樣式...調整中。

此外，在水果UZ上只有正確或不正確的答案，並且沒有正確的答案......在這種情況下，您將數組中的「Ugli水果」與「Ugli Fruit」作爲字符串進行比較。

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"); 
    console.log(word, answer1.innerHTML); 
    if(word == "Fruits U-Z") { 
     if(answer1.innerHTML == "Ugli Fruit") { 
     document.getElementById("correctAnswer").setAttribute("style", "display:inline; position:absolute; left:100px;"); 
     document.getElementById("incorrectAnswer").setAttribute("style", "display:none; position:absolute; right:100px;"); 
     } 
     else { 
       document.getElementById("correctAnswer").setAttribute("style", "display:none; position:absolute; left:100px;"); 
document.getElementById("incorrectAnswer").setAttribute("style", "display:inline; position:absolute; right:100px;"); 
     } 
    } 
    }); 
}