JavaScript – How To Execute a Function with Variables when Button is Clicked

If we take the following code, we call the Log function without the (). This calls the Log function every time the buttonObject is clicked.

// Find object id myButton
let buttonObject = document.getElementById('myButton')  

// Add an event listener, and run Log function when clicked.
buttonObject.addEventListener('click', Log) 
// If we call Log(), it will immediately trigger the function

function Log () {
  console.log("Hello World!")
}

But what if we want to pass in a variable to the Log function? We can’t run Log('some text') as the function will run before we click the object.

We can however wrap the Log function inside of an anonymous function like so

let buttonObject = document.getElementById('myButton')

// Now Log() function will be run with the variable getting passed.
buttonObject.addEventListener('click', () => {
  Log('Hello World!')
})

function Log (textVariable) {
  console.log(textVariable)
}

Our Log function gets triggered when the object is clicked, and the variable is passed properly. You can swap out thy arrow function with a nameless function ()

Leave a Reply

Your email address will not be published. Required fields are marked *