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

除了创建onClick属性外，还可以使用事件监听器在单击按钮时执行其他操作：

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

Answer 3

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

jQuery('.wp-block-column').each(function(){
  var current_column = jQuery(this);
  var image = current_column.find('.wp-block-image');
  var field = current_column.find('.tb-field');
  var button = current_column.find('.tb-button');
  
  if(jQuery.trim(image.html()) == 0){
    current_column.hide();
  }
  if(jQuery.trim(field.html()) == 0){
    current_column.hide();
  }
  if(jQuery.trim(button.html()) == 0){
    current_column.hide();
  }
});

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);
}

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

<div id="container">

</div>

希望有帮助

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]
    /* ... */
}

Answer 5

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

"verifyAnswer("+element+")"

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

另一种方式是与监听器

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

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

5 个答案: