Asociar varios manejadores de evento a un mismo elemento

Hice un contador para un solo boton (boton1), asociando un manejador de evento click, y funciona. Sin embargo, luego hice aproximadamente el mismo ejemplo, asociando otro contador de clics mediante otro manejador de eventos.

Es el mismo código, pero al agregar otro botón ya no funciona el primer contador.

JAVASCRIPT

//boton 1
window.onload = function () {
    var contador = 0;
    document.getElementById("boton1").onclick = function () {
        contador++;
        document.getElementById("mostrar").innerHTML = contador
    }
}
// //boton 2
// window.onload = function () {
//     var contador = 0;
//     document.getElementById("boton2").onclick = function () {
//         contador++;
//         document.getElementById("mostrar").innerHTML = contador
//     }
// }

Editar

Responder la pregunta

Natalie

2 1

Respuestas

Tu problema es que estás sobreescribiendo la propiedad window.onload.

Bien es cierto que window.onload permite asociar un manejador de evento. Pero cuando se ejecuta esa asignación por segunda vez en realidad no estás asociando un nuevo manejador de evento adicional, sino sustituyendo el que había antes.

La manera correcta de conseguir asociar varios eventos sería con "addEventListener"

window.addEventListener('onload', function() {
    // primer manejador de evento onload sobre el objeto window
});

window.addEventListener('onload', function() {
    // segundo manejador de evento onload sobre el objeto window
});

Aunque en este caso sería preferible incluso tener un único manejador de evento, que cree los manejadores de ambos botones.

window.addEventListener('onload', function() {
    // Defines el manejador de evento del primer boton
    document.getElementById("boton1").addEventListener('click', function() {
      // comportamiento asociado al botón1  
    });
    // Defines el manejador de evento del segundo boton
    document.getElementById("boton2").addEventListener('click', function() {
      // comportamiento asociado al botón2  
    });
});

Miguel Angel

3280 145 214 17

Cualquier evento te acepta múltiples manejadores con addEventListner().

document.getElementById('idDelElemento').addEventListener('click', function() {
  console.log('has hecho clic');
  // Este es el manejador de evento click sobre el elemento con id "idDelElemento". 
});

document.getElementById('idDelElemento').addEventListener('click', function() {
  console.log('Segundo manejador al evento click');
  // Este es otro manejador de evento click 
});

Alberto

610 16 42 18

Aportar una respuesta