Question

多项选择测验有问题

2020-07-13

37

javascript

下面的代码有问题。当用户点击按钮时，我想相应地设置 clickedAnswer 的值。然后我可以稍后根据答案验证所点击的按钮。目前，我每次都记录 4。任何帮助都非常感谢！

let clickedAnswer = 1;
           
function setClickedAnswer(button) {
    if (button.id === "option1") {
        clickedAnswer = 1;
    } else if (button.id === "option2") {
        clickedAnswer = 2;
    } else if (button.id === "option3") {
        clickedAnswer = 3;
    } else {
        clickedAnswer = 4;
    }
    validateAnswer();
    console.log(clickedAnswer);
}

answer1.addEventListener("click", setClickedAnswer);
answer2.addEventListener("click", setClickedAnswer);
answer3.addEventListener("click", setClickedAnswer);
answer4.addEventListener("click", setClickedAnswer);

Answer 1

该函数期望传递按钮本身：

function setClickedAnswer(button) {

但是，没有传递这样的按钮：

answer1.addEventListener("click", setClickedAnswer);

默认情况下，发送给事件处理程序的是事件对象本身，它具有一个指向调用事件的元素的 target 属性。因此，您可以这样做：

if (button.target.id === "option1") {

（当然，对其他条件重复此操作）

或者，如果您希望函数期望按钮元素，则可以在事件处理程序调用周围包装一个函数并将元素传递到那里：

answer1.addEventListener("click", () => setClickedAnswer(answer1));

或：

answer1.addEventListener("click", function () { setClickedAnswer(answer1); });