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

【问题标题】：How to pass value of a button into a function when it's clicked单击按钮时如何将按钮的值传递给函数
【发布时间】：2020-06-28 18:52:41
【问题描述】：

所以我正在尝试为我的一个班级创建一个测验。我创建了一组对象来保存我的问题、答案以及正确答案是什么。我正在使用 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);
})

【问题讨论】：

请考虑使用stack snippet 为我们创建您当前问题的minimal, reproducible example。

标签： javascript function onclick arguments

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

optionButton.addEventListener("click", function(){
   verifyAnswer(currentIndex);
});

【讨论】：

【解决方案3】：

您可以使用数据集添加信息，然后在 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);
}

希望对你有帮助

【讨论】：

【解决方案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]
    /* ... */
}

【讨论】：

【解决方案5】：

您可以通过在 verifyAnswer 函数中传递参数来做到这一点

"verifyAnswer("+element+")"

其中“元素”是您想要提供的参数，它可以是任何东西。

另一种方式是监听器

optionButton.addEventListener('click', function(){
    verifyAnswer(element);
});

【讨论】：