I had a look at some topics here regarding e/event.target vs event.currentTarget and this has helped me immensely when it comes to understanding the difference but obviously I have a long way to go still.
<body onload="attachEventsListeners()">
<main>
<h1>Time Converter</h1>
<div>
<label for="days">Days: </label>
<input type="text" id="days">
<input id="daysBtn" type="button" value="Convert">
</div>
<div>
<label for="hours">Hours: </label>
<input type="text" id="hours">
<input id="hoursBtn" type="button" value="Convert">
</div>
<div>
<label for="minutes">Minutes: </label>
<input type="text" id="minutes">
<input id="minutesBtn" type="button" value="Convert">
</div>
<div>
<label for="seconds">Seconds: </label>
<input type="text" id="seconds">
<input id="secondsBtn" type="button" value="Convert">
</div>
</main>
This is the body of a HTML document I am looking at. There is a task I have to do with it but I don't want anyone to write my code or anything of that sort. I just need some help with delegation when it comes to DOM elements.
I am trying to get access to each and every button within the divs of the skeleton. With my limited knowledge I have decided to do this:
let divElements = document.querySelectorAll('div');
This, as far as I know, will give me a NodeList which I can iterate. Ok fine. I then decide to add event listeners to every div element and try to console out the type of the target which triggers the event. As far as I know currentTarget is always what is directly attached to the eventListener and target is what the event is dispatched to(so to say).
divElements.forEach(d=>d.addEventListener('click', (e)=>{
console.log(e.target.type);
}))
When I click on Days in the first div I get both text and undefined - two rows of text. When I click on everything else in the first div I get just one. Why is that? Is my way of selecting(going from the divs a good idea or no?). Any help or links to something which you think is a relevant read would be appreciated!