多项选择测验的问题

Question

下面的代码有问题。 当用户单击按钮时，我想相应地设置 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 期望按钮本身被传递：

function setClickedAnswer(button) {

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

answer1.addEventListener("click", setClickedAnswer);

默认情况下发送到事件处理程序的是事件 object 本身，它具有引用调用事件的元素的target属性。 所以你可以这样做：

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

（当然，重复其他条件）

---

或者，如果您更喜欢 function 期望按钮元素，您可以将 function 包裹在您的事件处理程序调用周围并在那里传递元素：

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

或者：

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