• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

166
Vistas
HTML - How to select one id from a list of ids in querySelector

I am writing the following codes. There are repeating codes for the same function. I wonder if there is a way to include all the ids in one querySelector such that there are no repeats. Only the id in the selector is different.

The code is here:

function refreshMessage() {
  courseSocket.send(JSON.stringify({
    'message': 1
  }));
};

document.querySelector('#next-student').onclick = function(e) {
  refreshMessage();
};

document.querySelector('#put-back').onclick = function(e) {
  refreshMessage();
};

document.querySelector('#invite').onclick = function(e) {
  refreshMessage();
};

document.querySelector('#clear-queue').onclick = function(e) {
  refreshMessage();
};
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Iterate over all selectors...

const ids = ['next-student', 'put-back', 'invite', 'clear-queue'];
for (const id of ids) {
  document.getElementById(id).onclick = refreshMessage;
}

Or use event delegation

document.addEventListener('click', (e) => {
  if (e.target.closest('#next-student, #put-back, #invite, #clear-queue')) {
    refreshMessage();
  }
});
almost 3 years ago · Juan Pablo Isaza Denunciar

0

Use querySelectorAll

document.querySelectorAll("#next-student, #put-back, #invite, #clear-queue,[name=rdoGroup]").forEach(function(element) {
  element.onclick = function(e) {
    refreshMessage();
  }
});

function refreshMessage(){
  console.log("REFRESHING!");
}
<button id="next-student">Next</button>
<button id="put-back">Put Back</button>
<button id="invite">Invite</button>
<button id="clear-queue">Clear</button>
<label><input  type="radio" name="rdoGroup"> Yes</label>
<label><input  type="radio" name="rdoGroup"> No</label>

Or better yet, which preserves any existing on click listeners:

let selectors = ["#next-student", "#put-back", "#invite", "#clear-queue", "[name=rdoGroup]"];

document.querySelectorAll(selectors.join(",")).forEach(function(element) {
  element.addEventListener("click", refreshMessage);
});

function refreshMessage() {
  console.log("REFRESHING!");
}
<button id="next-student">Next</button>
<button id="put-back">Put Back</button>
<button id="invite">Invite</button>
<button id="clear-queue">Clear</button>
<label><input  type="radio" name="rdoGroup"> Yes</label>
<label><input  type="radio" name="rdoGroup"> No</label>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda