Javascript 事件监听器“e”

Question

I'm trying to get a grasp of e, this, binding. In this example, if you press the create new div button you get an elapsed time and start button. If you create multiple divs and press start on each, they are all impacted. I'm trying to make the elapsed time correspond to the button that was clicked. I passed in "e" through out the functions but I'm not sure how to handle the next step.

QUESTION: Should I add let clickedButton = event.target or event.parent within the start timer function and then in the display time, would that be clickedButton.newP.innerHTML = hour_format + " :" + min_format +" : " + sec_format; }

Below is the code:

 //"create div" button with click events let initial = document.getElementById("test"); initial.addEventListener("click", newPElement); let myTextArea = document.getElementById("textArea"); let newP; //function that creates a P function newPElement(){ newP = document.createElement("p"); newP.classList.add("myFont"); newP.innerHTML = "00:00:00"; myTextArea.appendChild(newP); let start = document.createElement("button"); start.innerText = "START"; start.addEventListener("click",function(e){ timer = setInterval(startTimer, 1000) }) myTextArea.appendChild(start); } function startTimer(e) { sec++; if(sec === 60){ sec === 0 min++; } if (min === 60){ min === 0; hour++; } displayTime(e) } //Global variables for the timer function let timer; let sec = 0; let min = 0; let hour = 0 let newElapsedTime; function displayTime(e){ let sec_format = sec; let min_format = min; let hour_format = hour; if(sec < 10){ sec_format = "0"+sec; } if(min < 10){ min_format = "0"+min; } if (hour <10){ hour_format = "0"+hour; } newP.innerHTML = hour_format + " :" + min_format +" : " + sec_format; }

 <h1>Testing</h1> <button id="test" class="test">CREATE DIV</button> <section id="textArea"> </section>

Answer 1

You seem to have some scoping issues here: the variables newP and sec , min , hour are on the global scope. You only have one instance of sec , min and hour , which means that it is impossible to keep track of the different timers that you create. Also, every time you create a new timer, you update newP to point to that new element, so the old ones are "forgotten". Because of this, only the value of the most recent timer will be updated.

I would highly recommend utilizing const instead of let whenever it makes sense to do so. The value of a const variable can't be changed, so it will guard you against accidentally changing a value that you didn't mean to change. For example, making the newP variable a const might alert you to the fact that you're trying to reassign the value of the existing variable to a new timer element instead of creating a new variable that would be independent of the old one. I think that DOM elements are a great example of something that should (or at least could) almost always be a const , since usually you want them to point to the same element that you originally intended to target. Note that you can still change the element's attributes, such as innerText , you just can't change the DOM element that it points to, or change the variable into to an integer or something. Of course it's mostly a matter of personal preference, but I've found that for me it makes it much easier to debug things like this.

Also, the timer in your example doesn't seem to work as intended. Here's my quick take on this sort of feature, let me know if there's anything you want to ask about it!

 const timerContainer = document.querySelector('#timers') const addTimerButton = document.querySelector('#add-timer') // Note that all the new elements are scoped inside the function that gets triggered by this eventListener addTimerButton.addEventListener('click', () => { // Create the new timer and start button const timer = document.createElement('p') const startButton = document.createElement('button') startButton.innerText = 'Start' // Set elapsedSeconds to 0 and initialize the timer's value let elapsedSeconds = 0 updateTimerValue() // Add the newly created elements to the timerContainer timerContainer.append(startButton, timer) // Start the timer startButton.addEventListener('click', () => { // Increment the timer every second and update the timer's text value setInterval(() => { elapsedSeconds++ updateTimerValue() }, 1000) }) function updateTimerValue() { // Count the seconds, minutes and hours, convert to strings and pad the strings with leading 0's const seconds = String(elapsedSeconds % 60).padStart(2, '0') const minutes = String(parseInt(elapsedSeconds / 60 % 60)).padStart(2, '0') const hours = String(parseInt(elapsedSeconds / 60 / 60)).padStart(2, '0') // Use string interpolation for formatting the timer string timer.innerText = `${hours}:${minutes}:${seconds}` } })

 p { margin-block: 0.2rem 0.6rem } button { padding: 0.2rem 0.7rem; cursor: pointer; }

 <button id="add-timer" type="button">Add new timer</button> <hr> <div id="timers"></div>