我需要有一个可单击的按钮,但是onClick
它将激活JavaScript函数,但是我不希望它成为<button>
元素,因为它将用一个看起来难看的矩形代替它,我只想div元素是可点击的,它将使它给出响应。如果这是一个测验,并且有一个定义单词的问题,我希望它能够单击生成的答案之一,并基于单击的内容,它将显示一个对号或一个X表示不正确。
问题
我需要3x3表具有可点击的<td>
元素,该表将onClick
输出JavaScript命令/函数,而不必为每个<button>
元素使用<td>
。
例
生成的单词“ FRUIT”到位。 9个可能的答案是“青豆”,“玉米”,“苹果”,“土豆”,“黄瓜”,“西红柿”,“胡萝卜”,“西兰花”和“白菜”。所有的<td>
元素都可以通过[我想着的工作] <td><a href="determineAnswer()">Carrot</a></td>
单击,如果单击了“ Apple”,它将输出该功能并检查其是否正确。如果它是,它将选中标记的display: hidden
更改为可见,直到单击该按钮。否则,它将对X执行相同的操作。
码
JS:基于单词功能更改答案
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";
}
}
JS:创建Word本身
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"
}
}
HTML:选择性元素
<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>
可行的CODEPEN
CodePen
最佳答案
因此,对于我的回答,我已经为您完成了一些主要的代码清理工作,并提供了使表格单元可单击的必要附加事件处理程序(在JavaScript代码段的末尾)。我希望您将此代码用作学习工具来提高自己的JavaScript能力,而不仅仅是在此项目中使用它。
// This is an unchanged function that was in the original CodePen provided, that I'm assuming was "borrowed" from elsewhere since you're not familiar with loops.
function getRandom() {
var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var gen_nums = [];
function in_array(array, el) {
for (var i = 0 ; i < array.length; i++)
if (array[i] == el) return true;
return false;
}
function get_rand(array) {
var rand = array[Math.floor(Math.random() * array.length)];
if (!in_array(gen_nums, rand)) {
gen_nums.push(rand);
return rand;
}
return get_rand(array);
}
for (var i = 0; i < 9; i++) {
return (get_rand(nums));
}
}
// EDIT: This acts like a "Dictionary" for your words. Each array must contain exactly 9 words
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"] }
];
// EDIT: This is the new condensed grabWord() function
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];
}
}
// EDIT: This is the fixed changeRandom() function
function changeRandom() {
document.getElementById("outputNumber").innerHTML = words[(getRandom() - 1)].word;
grabWord();
}
// Modified event handler that was in the original CodePen
document.getElementById("myBtn").addEventListener("click", function () {
changeRandom();
})
// New event handler for the clicking of the cells in the table.
var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function () {
alert(this.innerHTML);
});
}
table, tbody, tr, td{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
<div id="header" class="animated infinite pulse">
<h2>School Learning Kit!</h2>
</div>
<div id="header2">
<h5>This kit has multiple tools for learning <i>AND</i>school, including calculators, word definitions (quiz, study guide, etc) and more! Consult the JavaScript comments etc) and more! Consult the JavaScript comments (third box) for information on how to (third box) for information on how to change each tool to fit your needs!</h5>
</div>
<div id="randomizer">
<div id="wordOutput">
<div id="button">
<button id="myBtn">Randomize!</button><br />
<p>
Click this button to generate a random word!
</p>
</div>
</div>
<div id="answers" class="answers">
<p id="outputNumber" class="outputNumber">Your word will go here; Click the Randomize Button!</p>
<table>
<tbody>
<tr>
<td id="output1" tabindex="1"></td>
<td id="output2" tabindex="1"></td>
<td id="output3" tabindex="1"></td>
</tr>
<tr>
<td id="output4" tabindex="1"></td>
<td id="output5" tabindex="1"></td>
<td id="output6" tabindex="1"></td>
</tr>
<tr>
<td id="output7" tabindex="1"></td>
<td id="output8" tabindex="1"></td>
<td id="output9" tabindex="1"></td>
</tr>
</tbody>
</table>
</div>
</div>