Question about DOMs and arrays

JavaScript
1

Can DOM pointers/references be stored in an array and applied onclick events to assign functions to them?

Ex:

controlSection.innerHTML = "";
  buttonPointers = [];
    for (let i = 0; i < location.buttons.length; i++){
      controlSection.innerHTML += location.buttons[i].renderBtn();
      buttonPointers.push(document.getElementById(location.buttons[i].getID()));
      buttonPointers[i].onclick = location.buttons[i].getFunction();
      console.log("CLICK:", buttonPointers[i].onclick);
    };
  console.log(buttonPointers);
  buttonPointers.forEach((el) => console.log(el.onclick));

Is this valid?

2

dom elements can be iterated through loops and can be also be manipulated if that’s what you are asking…

happy coding :slight_smile:

3

Yes, you can store them. But I don’t see the point of doing that in the code you posted.

One use of storing selectors, is to create an object with all the selectors at the top-level. It can help organize them, and you get auto-completion for the selectors, so you do not have to scroll up every time you forget the variable name you stored them in.

1 Like
4

That could help me with grouping together the selectors that are always going to be present in the page.
(Ex: Stats, sections for display like inventory, stats, store, etc.; text display, etc.).

Thank you.

5

Yes, it can be pretty handy if you have a lot of elements.

Just remember dynamic values (like an input value) still needs to be evaluated as needed (i.e. you can store the element, not a changing/dynamic value).

1 Like
6

Got it.

Actually, I changed the code since then.

Instead of storing the DOM references, I just applied the onclick/addEventListener to the dynamically rendered button directly under another for loop.

function renderButtons(location) {

  // Clean Control Section First
  sectionSelectors.controlSection.innerHTML = "";
    for (let i = 0; i < location.buttons.length; i++){
      sectionSelectors.controlSection.innerHTML += location.buttons[i].renderBtn();
      
      
    };
  for (let i = 0; i < location.buttons.length; i++){
    document.getElementById(location.buttons[i].getID()).addEventListener("click", location.buttons[i].getFunction());
  }
};