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

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) {&nbsp; &nbsp; let optionButton = document.createElement("button");&nbsp; &nbsp; optionButton.innerHTML = element;&nbsp; &nbsp; optionButton.className = "btn";&nbsp; &nbsp; //Add data info&nbsp; &nbsp; optionButton.dataset.answer=element;&nbsp; &nbsp; optionButton.addEventListener("click", verifyAnswer);&nbsp;&nbsp; &nbsp; document.getElementById("container").appendChild(optionButton);})function verifyAnswer(event){&nbsp; &nbsp; clickedElement = event.target || event.srcElement;&nbsp; //getting info in the element&nbsp; &nbsp; alert(clickedElement.dataset.answer);}<div id="container"></div>或者，如果您的答案数据与 de 按钮内的文本相同，您也可以使用它function verifyWithText(event){&nbsp; &nbsp; clickedElement = event.target || event.srcElement;&nbsp; &nbsp; alert(clickedElement.innerHTML);}希望能帮助到你

Answer 3

您可以使用事件侦听器在单击按钮时执行其他操作，而不是创建 onClick 属性：optionButton.addEventListener("click", function(){&nbsp; &nbsp;verifyAnswer(currentIndex);});&nbsp;

Answer 4

data-在创建按钮时，您可以通过属性或直接在函数调用中跟踪答案索引。var answers = quiz[index].answers;answers.forEach(function(element, currentIndex) {&nbsp; &nbsp; var optionButton = document.createElement("button");&nbsp; &nbsp; optionButton.innerHTML = element;&nbsp; &nbsp; optionButton.className = "btn";&nbsp; &nbsp; optionButton.setAttribute("option-answer", element)&nbsp; &nbsp; optionButton.setAttribute("onClick", "verifyAnswer(" + currentIndex + ")")&nbsp; &nbsp; questionTitle.appendChild(optionButton);})然后，在您的函数调用中，您可以使用简单的访问器检索答案。function verifyAnswer(index) {&nbsp; &nbsp; const answer = answers[index]&nbsp; &nbsp; /* ... */}