CODEWITHSUNDEEP
javascriptfunctiononclickarguments
SmithBWare89
SmithBWare89

Reputation: 63

How to pass value of a button into a function when it's clicked

So I'm trying to create a quiz for a class of mine. I've created an array of objects to hold my questions, answers, and what the correct answer is. I'm using a forEach to generate buttons for each "answer" option at the specified index. I've added and onClick event to attempt to pass the value of the button into a function but I cannot seem to figure out what's the best way to go about doing this. I've included some of my code below to hopefully help.

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

Upvotes: 1

Views: 1216

Answers (5)

Carlos GB
Carlos GB

Reputation: 21

You could add the info using dataset and then recover it in the 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>

Or if your answer data is the same as the text inside de button you can also use this

function verifyWithText(event){
    clickedElement = event.target || event.srcElement;
    alert(clickedElement.innerHTML);
}

Hope it helps

Upvotes: 1

easternNorth
easternNorth

Reputation: 11

Instead of making an onClick attribute, you could use an event listener to do additional actions when the button is clicked:

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

Upvotes: 1

behruz
behruz

Reputation: 598

just pass the argument in your function call. here i use arrow function:

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

Upvotes: 1

N.Tasikj
N.Tasikj

Reputation: 386

You can do it with passing argument in your verifyAnswer function

"verifyAnswer("+element+")"

where "element" is argument that you want to provide it can be anything.

The other way is with listener

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

Upvotes: 0

Nicolas
Nicolas

Reputation: 8695

You could keep track of the answer index when creating a button, either via a data- attribute or directly in the function call.

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

And then, in your function call, you can retrieve the answer using a simple accessor.

function verifyAnswer(index) {
    const answer = answers[index]
    /* ... */
}

Upvotes: 0

Related Questions