Kevin Powell - Community•2mo ago

Event listener question

https://codepen.io/Adhurim-Gashi/pen/eYqZzRo - Hey guys, I am building a little calculator project with a tutorial for the (js) so in my js code whenever i click a button i get the console.log of the characters or numbers inside the calculator, and can someone decipher how those lines of code for me, cause i don't understand it that much, thanks.

Adhurim Gashi

CodePen

Untitled

...

10 Replies

ἔρως•2mo ago

what do you want to "decypher"?

Chris Bolson•2mo ago

//this function will actually "do" something with the value passed on button click
function buttonClick (value) { 
    // currently just logging the button text (NOT value) to the console
    console.log(value) 
}

// function that runs on page load as it is called directly (called below)
function init() { 
    // add a "click" event listener to every button in the dom with the class ".calc-buttons"
   document.querySelector(".calc-buttons").addEventListener("click", function(event) {
    // on "click" - sends the button text content *
     buttonClick(event.target.innerText) 
   })
}
// run the intital function which sets upt the event listeners on the calculator buttons
init()

//this function will actually "do" something with the value passed on button click
function buttonClick (value) { 
    // currently just logging the button text (NOT value) to the console
    console.log(value) 
}

// function that runs on page load as it is called directly (called below)
function init() { 
    // add a "click" event listener to every button in the dom with the class ".calc-buttons"
   document.querySelector(".calc-buttons").addEventListener("click", function(event) {
    // on "click" - sends the button text content *
     buttonClick(event.target.innerText) 
   })
}
// run the intital function which sets upt the event listeners on the calculator buttons
init()

* I personally would consider defining a value for each button and sending that rather than relying on the button text

theboyduddusOP•2mo ago

thanks chris

ἔρως•2mo ago

the last point is very interesting and important and i would even go further and say to use a form instead of click handlers on all buttons

Jochem•2mo ago

that said, You could just do this

document.querySelector(".calc-buttons").addEventListener("click", (event) => console.log(event.target.innerText));

document.querySelector(".calc-buttons").addEventListener("click", (event) => console.log(event.target.innerText));

or if you must:

function buttonClick (event) { 
    console.log(event.target.innerText); 
}
document.querySelector(".calc-buttons").addEventListener("click", buttonClick);

function buttonClick (event) { 
    console.log(event.target.innerText); 
}
document.querySelector(".calc-buttons").addEventListener("click", buttonClick);

setting up an init and then wrapping the buttonClick call in a separate function is a whole bunch of useless overhead Did you write this code, or did you get it somewhere?

ἔρως•2mo ago

it is useless if you dont use it on a window.addEventListener('ready', ...) or other method of detecting that the browser is ready which, now-a-days, can mostly be mitigated by using the defer attribute in the script tag

Jochem•2mo ago

the init() function is just called in the original example too, so it doesn't really do anything

ἔρως•2mo ago

well, there is actually 1 useful thing from it: no global variables and constants if you put the code outside the function, all the variables and constants are global automatically, because they are in the top scope but this creates a global init which is equally bad also, it is missing 'use strict';

Jochem•2mo ago

hmm, I suppose, yeah

ἔρως•2mo ago

the most useful would be a ready event handler or an anonymous function call, instead of a main(); à la c

Gaming

Programming

Event listener question