選項卡索引JavaScript函數未知/未指定錯誤？

Question

注意

我已經在我的備用帳戶David Vex上問過這個問題； 但是該帳戶已出現故障，我無法登錄，出現StackOverflow服務器錯誤，出現亂碼，談論ERROR：0x12084123，隨后出現服務器亂碼； 因此，跟進它的唯一方法就是重新提出它。 請原諒。

---

來自問題的報價（備用帳戶）

可行代碼

比JSFiddle好！

我正在嘗試為onClick的每個元素制作一個帶有tabindex的表，它將激活imageSelector函數（未命名）。 我從上一個問題中獲得了代碼，該代碼沒有命名函數。 它使用了'alert'變體，但是我適合需要檢查答案的函數，如果if（answer1.innerHTML ==“ Correct Answer”）{document.getElementById（“ correctAnswer”）。addAttribute （“ display”，“ inline”）}處於活動狀態，它將知道答案是設置的正確答案，並將設置id =“ correctAnswer”的圖像進行顯示，但是3秒鍾后應返回display =“ hidden”，然后重新激活整個隨機序列（如果尚未選擇該按鈕），這似乎不起作用。 我嘗試使用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保留了表格，每個元素都配有用於定位的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”； 如果您檢查元素的正確或錯誤答案，則不屬於以下樣式...調整。

另外，在Fruits UZ上，您只會得到正確或不正確的答案，並且沒有正確答案……在這種情況下，您是將數組中的“ Ugli fruit”與“ 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;");
      }
    }
  });
}