没有JavaScript输出的可点击按钮？

我需要有一个可点击的按钮，但是

onClick

它将激活一个JavaScript函数，但我不希望它是

元素，因为它将替换为一个外观难看的矩形，我只希望div元素可点击，并让它给出响应。如果这是一个测验，并且有一个问题来定义一个单词，我希望它能够单击其中一个生成的答案，并且根据单击的内容，它将显示一个复选标记表示正确，或者显示一个X表示不正确

问题 我需要为3x3表提供可单击的

元素，该表将在不必为每个

元素使用

的情况下，

onClick

输出JavaScript命令/函数

例子 生成的单词“水果”已就位。9个可能的答案是“绿豆”、“玉米”、“苹果”、“土豆”、“黄瓜”、“西红柿”、“胡萝卜”、“花椰菜”和“卷心菜”。所有的

元素都可以通过[我想做的工作]

点击，如果点击了“Apple”，它将输出该函数并检查它是否正确。如果是，则会将复选标记的显示：隐藏更改为可见，直到单击按钮为止。否则，它将对X执行相同的操作

代码 JS：根据单词功能更改答案 JS：创建单词本身 HTML：选择性元素

您的话会传到这里；点击随机按钮

可工作代码笔

---

将tabindex添加到要单击的div的html中，然后添加onclick

点击我

因此，对于我的答案，我已经为您进行了一些主要的代码清理，并提供了使表格单元格可点击所需的额外事件处理程序（在JavaScript代码片段的末尾）。我希望您使用此代码作为学习工具来提高自己的JavaScript能力，而不仅仅是将其用于这个项目中

//这是一个未更改的函数，它位于提供的原始CodePen中，我假设它是从其他地方“借用”来的，因为您不熟悉循环。
函数getRandom（）{
var nums=[1,2,3,4,5,6,7,8,9]；
var gen_nums=[]；
_数组中的函数（数组，el）{
对于（var i=0；i对于（var i=1；我提醒你，如果你使用一些循环，你的代码可能会被大量压缩。@Rorymcrossan抱歉，我对循环函数不是100%熟悉。@DavidVex-你尝试做的是非常非常基本的。循环也是非常非常基本的。我推荐一些阅读。首先-事件处理程序：-然后-循环：老实说，我现在就试试这个c:谢谢！当它允许我回答时，我会接受它：注：将JavaScript代码和事件放在HTML中不是一个好主意，最好将它们分开，放在JavaScript中。这回答了所有问题，除了一件事：我需要根据单词选择每个TD元素的答案；你能更新它以使每个单词都可以选择吗？我不太确定你的意思。你能提供一些更详细的信息吗？好的，更新的grabWord（）也是如此函数，它只是把它变成了A4W，然后是数字，对吗？我发布了代码，因为它不完整，必须进行设置，以便使用完整工具包的人可以更改grabWord（）函数并手动更改poss
function grabWord()  {
  var word = document.getElementById("outputNumber");
  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.innerHTML == "Word 1")  {
    answer1.innerHTML = "A4W1";
    answer2.innerHTML = "A4W2";
    answer3.innerHTML = "A4W3";
    answer4.innerHTML = "A4W4";
    answer5.innerHTML = "A4W5";
    answer6.innerHTML = "A4W6";
    answer7.innerHTML = "A4W7";
    answer8.innerHTML = "A4W8";
    answer9.innerHTML = "A4W9";
  }
  else if(word.innerHTML == "Word 2")  {
    answer1.innerHTML = "A4W2";
    answer2.innerHTML = "A4W2";
    answer3.innerHTML = "A4W2";
    answer4.innerHTML = "A4W2";
    answer5.innerHTML = "A4W2";
    answer6.innerHTML = "A4W2";
    answer7.innerHTML = "A4W2";
    answer8.innerHTML = "A4W2";
    answer9.innerHTML = "A4W2";    
  }
  else if(word.innerHTML == "Word 3")  {
    answer1.innerHTML = "A4W3";
    answer2.innerHTML = "A4W3";
    answer3.innerHTML = "A4W3";
    answer4.innerHTML = "A4W3";
    answer5.innerHTML = "A4W3";
    answer6.innerHTML = "A4W3";
    answer7.innerHTML = "A4W3";
    answer8.innerHTML = "A4W3";
    answer9.innerHTML = "A4W3";
  }
  else if(word.innerHTML == "Word 4")  {
    answer1.innerHTML = "A4W4";
    answer2.innerHTML = "A4W4";
    answer3.innerHTML = "A4W4";
    answer4.innerHTML = "A4W4";
    answer5.innerHTML = "A4W4";
    answer6.innerHTML = "A4W4";
    answer7.innerHTML = "A4W4";
    answer8.innerHTML = "A4W4";
    answer9.innerHTML = "A4W4";
  }
  else if(word.innerHTML == "Word 5")  {
    answer1.innerHTML = "A4W5";
    answer2.innerHTML = "A4W5";
    answer3.innerHTML = "A4W5";
    answer4.innerHTML = "A4W5";
    answer5.innerHTML = "A4W5";
    answer6.innerHTML = "A4W5";
    answer7.innerHTML = "A4W5";
    answer8.innerHTML = "A4W5";
    answer9.innerHTML = "A4W5";
  }
  else if(word.innerHTML == "Word 6")  {
    answer1.innerHTML = "A4W6";
    answer2.innerHTML = "A4W6";
    answer3.innerHTML = "A4W6";
    answer4.innerHTML = "A4W6";
    answer5.innerHTML = "A4W6";
    answer6.innerHTML = "A4W6";
    answer7.innerHTML = "A4W6";
    answer8.innerHTML = "A4W6";
    answer9.innerHTML = "A4W6";
  }
  else if(word.innerHTML == "Word 7")  {
    answer1.innerHTML = "A4W7";
    answer2.innerHTML = "A4W7";
    answer3.innerHTML = "A4W7";
    answer4.innerHTML = "A4W7";
    answer5.innerHTML = "A4W7";
    answer6.innerHTML = "A4W7";
    answer7.innerHTML = "A4W7";
    answer8.innerHTML = "A4W7";
    answer9.innerHTML = "A4W7";
  }
  else if(word.innerHTML == "Word 8")  {
    answer1.innerHTML = "A4W8";
    answer2.innerHTML = "A4W8";
    answer3.innerHTML = "A4W8";
    answer4.innerHTML = "A4W8";
    answer5.innerHTML = "A4W8";
    answer6.innerHTML = "A4W8";
    answer7.innerHTML = "A4W8";
    answer8.innerHTML = "A4W8";
    answer9.innerHTML = "A4W8";
  }
  else if(word.innerHTML == "Word 9")  {
    answer1.innerHTML = "A4W9";
    answer2.innerHTML = "A4W9";
    answer3.innerHTML = "A4W9";
    answer4.innerHTML = "A4W9";
    answer5.innerHTML = "A4W9";
    answer6.innerHTML = "A4W9";
    answer7.innerHTML = "A4W9";
    answer8.innerHTML = "A4W9";
    answer9.innerHTML = "A4W9";
  }
  else  {
    answer1.innerHTML = "Error";
    answer2.innerHTML = "Error";
    answer3.innerHTML = "Error";
    answer4.innerHTML = "Error";
    answer5.innerHTML = "Error";
    answer6.innerHTML = "Error";
    answer7.innerHTML = "Error";
    answer8.innerHTML = "Error";
    answer9.innerHTML = "Error";
  }
}

function changeRandom()  {
  var x = document.getElementById('outputNumber').innerHTML
  if(x == 1)  {
    document.getElementById("outputNumber").innerHTML = "Word 1";
  } else if(x == 2)  {
    document.getElementById("outputNumber").innerHTML = "Word 2";
  } else if(x == 3)  {
    document.getElementById("outputNumber").innerHTML = "Word 3";
  } else if(x == 4)  {
    document.getElementById("outputNumber").innerHTML = "Word 4" 
  } else if(x == 5) {
    document.getElementById("outputNumber").innerHTML = "Word 5"
  }
  else if(x == 6) {
    document.getElementById("outputNumber").innerHTML = "Word 6"
  } 
  else if(x == 7) {
    document.getElementById("outputNumber").innerHTML = "Word 7"
  }
  else if(x == 8) {
    document.getElementById("outputNumber").innerHTML = "Word 8"
  }
  else if(x == 9) {
    document.getElementById("outputNumber").innerHTML = "Word 9"
  }
  else if(x == 10) {
    document.getElementById("outputNumber").innerHTML = "Word 10"
  }
  else  {
    document.getElementById("output1").innerHTML = "Error :c"
  }
}

  <table>
    <p id="outputNumber" class="outputNumber">Your word will go here; Click the Randomize Button!</p>
    <tr>
      <td id="output1"></td>
      <td id="output2"></td>
      <td id="output3"></td>
    </tr>
    <tr>
      <td id="output4"></td>
      <td id="output5"></td>
      <td id="output6"></td>
    </tr>
    <tr>
      <td id="output7"></td>
      <td id="output8"></td>
      <td id="output9"></td>
    </tr>
  </table>