Click here to Skip to main content
15,868,164 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:
JavaScript
//"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;
   }


What I have tried:

Attempts are discussed in the question. Thanks.
Posted
Updated 14-Jun-22 3:57am
v2
Comments
Member 15627495 13-Jun-22 17:05pm    
hello,

when you use setinterval, you already create an underneath event, collapsed with timer = ...
so you don't need to catch one more event by "addevent"

just call the function as simple as possible .
the button fire the function, the tmer ( setinterval ) will do the job.
madQuestions 13-Jun-22 17:26pm    
Hello. I don't want the setinterval to begin running the function until the start button is pressed. How can I tie each button that is created to the p tag it was created with so I can update only that p tags inner HTML?
Member 15627495 14-Jun-22 12:29pm    
you must add ( all += new element ) to agregate all the datas or tags in a string.

or "append" every time required.
madQuestions 14-Jun-22 12:32pm    
Hello, can you please elaborate on this? I'm very new to programming.
Member 15627495 15-Jun-22 1:11am    
newP.innerHtml() will get the string/tags inside newP.

var temp = newP.innerHtml();

by concatenation, you'll add yours "Times strings" ( hour_format + " :" + min_format +" : " + sec_format )
temp += hour_format + " :" + min_format +" : " + sec_format;

temp += someVars is equal to temp = temp + someVars, it's a syntax shortcut with concatenation operator ( + ) in Js.

after that you replace the old content of newP , by the new :
newP.innerHtml = temp;

var temp = newP.innerHtml();temp += hour_format + " :" + min_format +" : " + sec_format;newP.innerHtml = temp;


It's stamping before replacing :


A = content; ( temp = newP.innerHtml() )
A += content added; ( you prepare the new content : temp += 'string to add' )
B = A ( you replace the old newP by a new content : newP.innerHtml = temp )

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900