How do I keep track of multiple objects in Javascript

Question

I am building a page with multiple timers on it. The timers are created when a user clicks a button. So let's say user clicks "K Timer 1" button. The JS created a new timer I want to reference as "KT1" or timers['KT1'].

Here is the way I am trying to do it and you JS peeps are probably laughing at my solution right now. That's OK. I am much more at home with PHP.

HTML

            <button type="button"
                onClick="newUTimer('KT1');">
                Timer 1
            </button>

            <button type="button"
                onClick="newUTimer('KT2');">
                Timer 2
            </button>

JS - Old with errors

var timers = {};

newUTimer=function(id){
    // If timer does not exist, create it
    if (!globalThis.timers.[id]){
        globalThis.timers.[id] = new CUTimer(id);
        globalThis.timers.[id].starter();

    // If there is already a timer with that ID, reset it
    }else{
        globalThis.timers.[id].reset();
    }
}

The reason I need to keep track of the timers is so that I can reset the timer when a user click button for the second time instead of creating another conflicting timer.

JS - UPDATED and Working but not sure this is the correct way I should do this.

var timers = {};

newUTimer=function(id){
    // If timer does not exist, create it
    if (!globalThis.timers[id]){
        globalThis.timers[id] = new CUTimer(id);
        globalThis.timers[id].starter();

    // If there is already a timer with that ID, reset it
    }else{
        // Call object resetIt method
        globalThis.timers[id].resetIt();
    }
}

So what is actually wrong with your solution? What isn't it doing that it should? What is it doing that it shouldn't? Do you get any console errors? Finally what is CUTimer? — Jon P
– Jon P, Commented Feb 17, 2022 at 5:39
@JonP CUTimer is my custom JS timer object that updates the HTML to reflect timer activity — firemankurt
– firemankurt, Commented Feb 17, 2022 at 5:49

Jon P · Accepted Answer · 2022-02-17 05:43:00Z

1

Lose the dots before array brackets: globalThis.timers.[id].starter() should be globalThis.timers[id].starter()

edited Feb 17, 2022 at 5:43

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

answered Feb 17, 2022 at 5:33

aPajo

558 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

firemankurt Over a year ago

Thank you very much, It works now! Is there a cleaner way that I should be tracking the timers in this script.

marc_s · Accepted Answer · 2023-11-05 19:36:37Z

You should accept aPajos answer as it pointed out your actual error. As for the "more correct way", get rid of inline Javascript

var timers = {};

/*Get the buttons with the data attributes*/
let timerButtons = document.querySelectorAll("button[data-timerid]");
/*Iterate over them adding an event handler*/
timerButtons.forEach(function(item){
  item.addEventListener("click", function(){
    /*Get the id from the data atttribute*/
    let timerId = this.dataset.timerid;
    /*Better to go the positive case first*/
    if(timers[timerId]){
      timers[timerId].resetIt();
    }else{
      timers[timerId] = new CUTimer(timerId);
    }
  });
})


function CUTimer(id){
  this.id = id;
  this.starter = function(){console.log("Starting : " + this.id)};
  this.resetIt = function(){console.log("Resetting : " + this.id)};
  //Call your starter method in the construtor
  this.starter();
};

<!-- Use Data Attributes to store the timer Id -->
<button type="button" data-timerid='KT1'>Timer 1</button>
<button type="button" data-timerid='KT2'>Timer 2</button>

Collectives™ on Stack Overflow

How do I keep track of multiple objects in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related