单击按钮时如何将按钮的值传递给函数

Question

所以我正在尝试为我的一个班级创建一个测验。我创建了一组对象来保存我的问题、答案以及正确答案是什么。我正在使用 forEach 为指定索引处的每个“答案”选项生成按钮。我添加了 onClick 事件以尝试将按钮的值传递给函数，但我似乎无法弄清楚执行此操作的最佳方法是什么。我在下面包含了一些代码，希望能有所帮助。var answers = quiz[index].answers;answers.forEach(function(element) {    var optionButton = document.createElement("button");    optionButton.innerHTML = element;    optionButton.className = "btn";    optionButton.setAttribute("option-answer", element)    optionButton.setAttribute("onClick", "verifyAnswer()")    questionTitle.appendChild(optionButton);})

Answer 1

只需在函数调用中传递参数。这里我使用箭头函数：

optionButton.addEventListener("click", () => {verifyAnswer(element)})

Answer 2

您可以使用数据集添加信息，然后在 EventListener 中恢复它

const answers=["option 1","option 2","option 3"];

answers.forEach(function(element) {

    let optionButton = document.createElement("button");

    optionButton.innerHTML = element;

    optionButton.className = "btn";

    //Add data info

    optionButton.dataset.answer=element;

    optionButton.addEventListener("click", verifyAnswer); 

    document.getElementById("container").appendChild(optionButton);

})

function verifyAnswer(event){

    clickedElement = event.target || event.srcElement;

  //getting info in the element

    alert(clickedElement.dataset.answer);

}

<div id="container">

</div>

或者，如果您的答案数据与 de 按钮内的文本相同，您也可以使用它

function verifyWithText(event){

    clickedElement = event.target || event.srcElement;

    alert(clickedElement.innerHTML);

}

希望能帮助到你

Answer 3

您可以使用事件侦听器在单击按钮时执行其他操作，而不是创建 onClick 属性：

optionButton.addEventListener("click", function(){

   verifyAnswer(currentIndex);

}); 

Answer 4

data-在创建按钮时，您可以通过属性或直接在函数调用中跟踪答案索引。

var answers = quiz[index].answers;

answers.forEach(function(element, currentIndex) {

    var optionButton = document.createElement("button");

    optionButton.innerHTML = element;

    optionButton.className = "btn";

    optionButton.setAttribute("option-answer", element)

    optionButton.setAttribute("onClick", "verifyAnswer(" + currentIndex + ")")

    questionTitle.appendChild(optionButton);

})

然后，在您的函数调用中，您可以使用简单的访问器检索答案。

function verifyAnswer(index) {

    const answer = answers[index]

    /* ... */

}