[英]How can I determine which li in an ul has been clicked upon?
I'm making a quiz game in HTML/JavaScript which selects questions at random and adds the question and answer to the page ( document.getElementById, innerHTML
etc.) 我正在用HTML / JavaScript制作问答游戏,该游戏随机选择问题并将问题和答案添加到页面(
document.getElementById, innerHTML
等)
I want to add a click listener so when an answer is clicked it will determine if it is correct or not. 我想添加一个单击侦听器,以便在单击答案时将确定它是否正确。 How should I set up this listener (or listeners?) to distinguish between
li
s. 我应该如何设置一个(或多个)侦听器以区分
li
。
JavaScript 的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 的HTML
<!-- Question -->
<p id="question"> </p>
<!-- Answer Array -->
<ul id="answers"> </ul>
(I get the feeling I'm missing something obvious...) Thanks (我感觉到我缺少明显的东西...)谢谢
When you add your answer, you can also add an EventListener for that: 添加答案时,您还可以为此添加一个EventListener:
elementAnswers.addEventListener("click", been_clicked, true);
In the callback funktion "been_clicked" you can refer to the Element that handled the Event (here: the ul-node) as "this", and to the Element that was clicked as "e.target": 在回调函数“ been_clicked”中,可以将处理事件的元素(此处为ul-node)称为“ this”,将单击的元素称为“ e.target”:
function been_clicked(e) {
alert("You clicked '" + e.target.innerHTML + "'");
}
See http://jsfiddle.net/bjelline/7kSw5/ for a working demo. 有关有效的演示,请参见http://jsfiddle.net/bjelline/7kSw5/ 。
Insert this into the loop: 将此插入循环:
li.onclick=create_on_click_function(li);
And add a new function, that will generate onclick callback function: 并添加一个新函数,该函数将生成onclick回调函数:
function create_on_click_function(element){
return function(){
alert(element.innerHTML + ' clicked');
}
}
Add appropriate parameters to determine, whether the id of the clicked <li>
element is equal to answer id. 添加适当的参数以确定单击的
<li>
元素的ID是否等于答案ID。
If you add an id to each <li>
(like answer_0, answer_1, etc.), you can have a single listener on the <ul>
, to since events on the list items will bubble up: 如果您为每个
<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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.