> Faqs > Asociar varios manejadores de evento a un mismo elemento

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
//     }
// }
Responder la pregunta
Editar Hacer otra preguntaPreguntar

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
510 26 35 2