If we take the following code, we call the Log function without the (). This calls the Log function every time the buttonObject is clicked. <\/p>\n\n\n\n
\/\/ Find object id myButton\nlet buttonObject = document.getElementById('myButton') \n\n\/\/ Add an event listener, and run Log function when clicked.\nbuttonObject.addEventListener('click', Log) \n\/\/ If we call Log(), it will immediately trigger the function\n\nfunction Log () {\n console.log(\"Hello World!\")\n}<\/code><\/pre>\n\n\n\nBut what if we want to pass in a variable to the Log function? We can’t run Log('some text')<\/code> as the function will run before we click the object.<\/p>\n\n\n\nWe can however wrap the Log function inside of an anonymous function like so<\/p>\n\n\n\n
let buttonObject = document.getElementById('myButton')\n\n\/\/ Now Log() function will be run with the variable getting passed.\nbuttonObject.addEventListener('click', () => {\n Log('Hello World!')\n})\n\nfunction Log (textVariable) {\n console.log(textVariable)\n}<\/code><\/pre>\n\n\n\nOur 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 ()<\/code> <\/p>\n","protected":false},"excerpt":{"rendered":"If we take the following code, we call the Log function without the (). This calls the Log function every time the buttonObject is clicked. But what if we want to pass in a variable to the Log function? We … Continue reading