CODEWITHSUNDEEP
javascript
CrystalGarnet
CrystalGarnet

Reputation: 119

Passing parameter to onclick function

In the below code, I'm trying to call answerButtonPressed and pass the strings 'left_button' and 'right_button' as parameters when the buttons are clicked. As is, I know when I define answerLeftButtonFunction it's immediately getting the value of answerButtonPressed('left_button'). How can I instead pass a reference to the function to showButton, to ensure that when the button is clicked it calls answerButtonPressed while passing the correct string as a parameter?

The only way I can think to do it involves global variables or creating a function for each button which I'm trying to avoid.

What's the "correct" way to do this?

const answerLeftButtonFunction = answerButtonPressed('left_button')
const answerRightButtonFunction = answerButtonPressed('right_button')
showButton(left_button, answer, answerLeftButtonFunction)
showButton(right_button, answer, answerRightButtonFunction)

function showButton(button, text, button_function) {
    button.innerText = text
    button.onclick = button_function
}

Upvotes: 0

Views: 66

Answers (3)

Kinglish
Kinglish

Reputation: 23654

You can use data-attributes on the buttons to make them 'self-aware' and then set a listener to test if 1) the button clicked was one of our left/right buttons and then 2) which of them it was.

window.addEventListener('load', () => {
  document.addEventListener('click', e => {
    if (e.target.classList.contains('btn-dir')) {
      // one of our buttons
      console.log(`The ${e.target.dataset.dir} button was clicked`);
    }
  })
})
<button class='btn-dir' data-dir="left">< Left</button>
<button class='btn-dir' data-dir="right">Right ></button>

Upvotes: 1

saferif
saferif

Reputation: 197

You can try something like

const answerLeftButtonFunction = () => answerButtonPressed('left_button')
const answerRightButtonFunction = () => answerButtonPressed('right_button')
showButton(left_button, answer, answerLeftButtonFunction)
showButton(right_button, answer, answerRightButtonFunction)

function showButton(button, text, button_function) {
    button.innerText = text
    button.onclick = button_function
}

Upvotes: 0

Kelvin Schoofs
Kelvin Schoofs

Reputation: 8718

To be honest, creating new functions is the best and "correct" way to do it. Unlike some other "scripting" languages, function creations/calls in JavaScript aren't as expensive as you'd imagine. Although rereading your question, it seems as if you meant duplicating answerButtonPressed VS creating anonymous wrapper functions for it.

Therefore:

showButton(left_button, answer, () => answerButtonPressed('left_button'))

Alternatively, since onclick will call your handler with the DOM event that contains (amongst other things) a reference to the object that got clicked (e.g. the button), you could use that to determine the button name. You'd still have to be able to access the button name, by e.g. storing it as a HTML attribute on the button object.

Upvotes: 0

Related Questions