0

Estoy haciendo un script que referencio desde dos páginas, ese script se encarga de mostrar un modal de acuerdo a la página que lo llama. Se requiere que se muestre el modal de acuerdo al id del elemento que lo llama (con un evento), para ello agrego una clase y un id a los elementos.

<button class="btn" id="btn1">Click</button>
<button class="btn" id="btn2">Click 2</button>

El script contiene lo siguiente:

function showModal(){
    if(this.id == "btn1"){
        //mostrar modal
    }
    else if(this.id == "btn2"){
        //mostrar modal
    }
}

buttons = document.querySelectorAll(".btn");

for(int i=0; i<buttons.length; i++){
    buttons[i].addEventListener('submit', function(e) {
        showModal();
    });
}

Es posible que uno de los dos botones no se encuentre en el documento HTML, se hace así para reutilizar el código en un futuro. Nota: al hacer console.log(this.id) arroja undefined

1
  • 1
    Donde pones int i=0 debes poner let i=0 Commented el 1 nov. 2022 a las 5:52

2 respuestas 2

1

Hay varias formas de realizar el cometido, te comparto una que va con el código que vas realizando, donde como parámetro mandas el mismo componente que lo llama:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <button id="btnUno" onclick="showModal(this)">Botón Uno</button>
        <button id="btnDos" onclick="showModal(this)">Botón Dos</button>

        <script>
            function showModal(boton){
                if(boton.id == "btnUno"){
                    //Muestra modal uno
                }
                else if(boton.id == "btnDos"){
                    //muestra modal dos
                }
            }
        </script>

    </body>
</html>

0
0

Casi lo tenías.

En tu caso, puedes manejar mejor el evento click. Y si pasas una referencia de tu función, el this estará referenciando el botón clickeado.

Te dejo un ejemplo:

function showModal(){
    if(this.id == "btn1"){
        //mostrar modal
        alert("Click en el boton 1");
    }
    else if(this.id == "btn2"){
        //mostrar modal
        alert("Click en el boton 2");
    }
}

buttons = document.querySelectorAll(".btn");

for(let i=0; i<buttons.length; i++){
    buttons[i].addEventListener('click', showModal);
}
<button class="btn" id="btn1">Click</button>
<button class="btn" id="btn2">Click 2</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.