Tengo varios en mi código, cada uno con class="output" e ID únicos.
<p>Workers: <span class="output" id="workersOutput">0</span><span class="output" id="workersProdOutput"></span></p>Quiero usar querySelectorAll para que sean direccionables en js a través de variables/const para poder cambiar sus valores con textContent.
Individualmente, haría lo siguiente para encontrar cada div y luego la segunda línea para actualizarla en la pantalla.
const workersOutput = document.getElementById('workersOutput'); workersOutput.textContent = `${workers}`;Sin embargo, esto es realmente complicado cuando tendré que hacer muchos de estos (12 en este momento, más por venir).
Usando querySelectorAll, puedo hacer una versión híbrida, usando sus números de índice individuales de la lista de nodos. No es exactamente legible ni fácil de usar, ya que los datos adjuntos a cada uno solo son visibles si los envío a alguna parte. Sin mencionar que si agrego más divs, esos números cambiarán y ya no se asignarán a las mismas ID.
const outputs = document.querySelectorAll('.output'); outputs[2].textContent = `${workers}`;¿No podría usar quizás forEach para crear una variable para cada uno usando la identificación adjunta a ese número de índice? O algo parecido al siguiente ejemplo (sé que no es así como funciona, pero quiero transmitir la idea):
const outputs = document.querySelectorAll('.output'); outputs.forEach((output) => { const outputs[2] = document.getElementById(output.id); });También podría estar muy lejos de cómo lograr esto de la "manera correcta", soy nuevo en la codificación.
Utilice un objeto cuyos nombres de propiedad sean los ID.
const outputs = {}; document.querySelectorAll(".output").forEach(el => outputs[el.id] = el);