-2

I have multiple in my code, each with class="output" and unique IDs.

<p>Workers: <span class="output" id="workersOutput">0</span><span class="output" id="workersProdOutput"></span></p>

I want to use querySelectorAll to get them addressable in js via variables/const so that I can change their values with textContent.

Individually, I would do the following to find each div, and then the second line to update it on screen.

const workersOutput = document.getElementById('workersOutput');
workersOutput.textContent = `${workers}`;

This is really messy though when I'll have many of these to do (12 at the moment, more to come).

Using querySelectorAll, I can make some hybrid version, using their individual index numbers from the node list. It's not exactly readable or easy to use, as the data attached to each is only visible if I output it somewhere. Not to mentioned if I add more divs, those numbers will change and not be assigned to the same IDs anymore.

const outputs = document.querySelectorAll('.output');
outputs[2].textContent = `${workers}`;

Couldn't I use maybe forEach to create a variable for each using the ID attached to that index number? Or something along the lines of the below example (I know that's not how that works, but I want to get the idea across):

const outputs = document.querySelectorAll('.output');

outputs.forEach((output) => {
    const outputs[2] = document.getElementById(output.id);
});

I could also be way off on how to accomplish this the "right way", I'm newish to coding.

oxide7
  • 101
  • 4
  • 2
    What's the point of making variables for each of them? How will the rest of the code refer to those variables? – Barmar Feb 18 '22 at 17:55
  • `outputs.forEach(o => o.textContent = workers)` – Barmar Feb 18 '22 at 17:57
  • *"but it's not exactly readable or easy to use"* - Why not? What you're working with is essentially an array (or at least an iterable collection one way or another). The solution you're proposing, creating a bunch of variables with numbers dynamically appended to them, is best handled by using an array. Which is what you already have. What exactly is the problem you're trying to solve? – David Feb 18 '22 at 17:57
  • "* I then want to create a variable for each of them.*" + "*Individually, I would do the following to establish it, and then update it.*" sounds like you're describing an array. You can populate it, then update each entry. – VLAZ Feb 18 '22 at 17:57
  • `outputIDs = Array.from(outputs).map(o => o.id)` – Barmar Feb 18 '22 at 17:58
  • @Barmar I make the variables individually in the first example. So I can easily call back to it later to update the value on screen. I have 12 of each of these in my code at the moment and they each look at some other variable for their value. – oxide7 Feb 18 '22 at 18:04
  • Yeah, but usually in cases like this the number of items is dynamic, so you can't hard-code the variable names. – Barmar Feb 18 '22 at 18:04
  • @David It's not readable in my code. I'd have outputs[1] - output[12] and none of them really indicate what its referring too. If I add more of these in the HTML then those numbers change too, no? Unless I'm mistaken, querySelectorAll only lets me call stuff by index instead of by the id or class or whatever else it might be tied to. I don't want random numbers, I just want to use workersOutput instead of outputs[1] which is how to you call stuff from querySelectorAll Nodelist. – oxide7 Feb 18 '22 at 18:07
  • @Barmer I don't want to hardcode the variable names, thats the thing. I want to dynamically have it create the "const workers" based on the id attached to each individual item in the Node list. – oxide7 Feb 18 '22 at 18:10
  • 1
    Use an object whose properties are the IDs. – Barmar Feb 18 '22 at 18:11

1 Answers1

2

Use an object whose property names are the IDs.

const outputs = {};
document.querySelectorAll(".output").forEach(el => outputs[el.id] = el);
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • There likely will never be a fixed set of elements. This isn't something I knew I could do, and IS helpful, but I guess it doesn't solve the issue I have now. – oxide7 Feb 18 '22 at 18:09
  • Your comment about making the variables individually suggested that there would be a fixed number of variables. – Barmar Feb 18 '22 at 18:11
  • I've updated the answer to show how to use the IDs as the keys in an object. – Barmar Feb 18 '22 at 18:13
  • I closed it because you seemed to be asking how to create dynamically-named variables, and that's answered in the linked question. – Barmar Feb 18 '22 at 18:41