Question

我在HTML / JavaScript中制作测验游戏，随机选择问题并在页面上添加问题和答案（document.getElementById, innerHTML等）

我想添加一个点击监听器，这样当点击一个答案时，它将确定它是否正确。我应该如何设置这个监听器（或监听器？）来区分li s。

的JavaScript

var elementQuestion = document.getElementById("question"); 
var elementAnswers = document.getElementById("answers"); 
elementQuestion.innerHTML = question[currentQuestion]; 
for(a = 0; a < answers[currentQuestion].length; a++) {
    var li = document.createElement("li");
    li.innerHTML = answers[currentQuestion][a];
    elementAnswers.appendChild(li);
}

HTML

<!-- Question -->
<p id="question"> </p>
<!-- Answer Array -->
<ul id="answers"> </ul>

（我感觉我错过了一些明显的东西......）谢谢

Answer 1

当您添加答案时，您还可以为其添加一个EventListener：

elementAnswers.addEventListener("click", been_clicked, true);

在回调功能“been_clicked”中，您可以参考Element 处理事件（这里：ul节点）为“this”，并处理被点击为“e.target”的元素：

function been_clicked(e) {
   alert("You clicked '" + e.target.innerHTML + "'");
}

有关正常工作的演示，请参阅http://jsfiddle.net/bjelline/7kSw5/。

Answer 2

将其插入循环：

li.onclick=create_on_click_function(li);

添加一个新函数，它将生成onclick回调函数：

function create_on_click_function(element){

      return function(){
            alert(element.innerHTML + ' clicked');
      }
}

添加适当的参数以确定所点击的<li>元素的ID是否等于答案ID。

Answer 3

如果您为每个<li>添加一个ID（例如answer_0，answer_1等），您可以在<ul>上设置一个侦听器，因为列表项上的事件会冒泡：

var elementQuestion = document.getElementById("question"); 
var elementAnswers = document.getElementById("answers"); 
elementQuestion.innerHTML = question[currentQuestion]; 
for(a = 0; a < answers[currentQuestion].length; a++) {
    var li = document.createElement("li");
    li.innerHTML = answers[currentQuestion][a];
    li.id = "answer_" + a
    elementAnswers.appendChild(li);
}
elementAnswers.addEventListener("click", function(e) {
    alert("Clicked on " + e.target.id);
});

如何确定点击ul中的哪个li？

3 个答案: