Estoy escribiendo los siguientes códigos. Hay códigos repetidos para la misma función. Me pregunto si hay una manera de incluir todas las identificaciones en un querySelector de modo que no haya repeticiones. Solo la identificación en el selector es diferente.
El código está aquí:
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(); };Iterar sobre todos los selectores...
const ids = ['next-student', 'put-back', 'invite', 'clear-queue']; for (const id of ids) { document.getElementById(id).onclick = refreshMessage; }O use la delegación de eventos
document.addEventListener('click', (e) => { if (e.target.closest('#next-student, #put-back, #invite, #clear-queue')) { refreshMessage(); } });Usar 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>O mejor aún, que conserva cualquier oyente de clic existente:
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>