0

tengo dos popup en mi html, el primero lo abro usando un <a href=""></a> usando en JS addEventListener()

openPopup.addEventListener('click', function() {
  overlay.classList.add('active');
]);

me abre sin problemas, pero el 2do popup necesito abrirlo desde un option en un select:

<div class="form-group">
    <select class="form-control" name="subject" id="subject" required="required">
        <option value="">Asunto:</option>
        <option value="">Reporte de daño</option>
        <option value="">Luminaria robada</option>
        <option value="">Solicitud para instalaciones</option>
        <option class="openPopupPqrs" id="openPopupPqrs" value="">PQRS</option>
     </select>
</div>

usando esta función:

openPopupPqrs.addEventListener('click', function() {
  overlayPqrs.classList.add('active');
  console.log("Hola entrando a PQRS");
});

pero no entra a la función cuando doy click, y el navegador me da un error de Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'), pense que iba a servirme pero parece que no.

3
  • 1
    ¿Dónde estás definiendo a la variable openPopupPqrs? Prestale atención al mensaje de error que da :)
    – padaleiana
    Commented el 27 dic. 2021 a las 17:15
  • La variable la estoy declarando en el JS, se me olvido colocarla, esta asi: var openPopupPqrs = document.getElementById('openPopupPqrs'); Sorry :D
    – iSony
    Commented el 27 dic. 2021 a las 17:17
  • Asegurate que openPopupPqrs este definido dentro de tu funcion, tal vez esta definida pero no para esa funcion. Te esta diciendo que el valor de openPopupPqrs es NULL
    – Mateo Guio
    Commented el 27 dic. 2021 a las 19:16

1 respuesta 1

2

Te propongo la siguiente solución, en vez de intentar aplicar un Listener al option, le pones uno al Select y validas cuál fue el option seleccionado:

<div class="form-group">
    <select class="form-control" name="subject" id="subject" required="required">
        <option value="">Asunto:</option>
        <option value="">Reporte de daño</option>
        <option value="">Luminaria robada</option>
        <option value="">Solicitud para instalaciones</option>
        <option value="openPopupPqrs">PQRS</option>
     </select>
</div>

Con el atributo value en el option, puedes identificar cuál seleccionó, y a nivel de JS:

const select = document.getElementById('subject');
select.addEventListener('change', function(evt) {
    if (this.value === 'openPopupPqrs') {
        overlayPqrs.classList.add('active');
        console.log("Hola entrando a PQRS");
    }
});
2
  • Gracias <3 si sirvio, pero quisiera saber porque no pudo hacerse con le option? el Event se comporta de forma diferente depende al objeto y vi que cambiaste el 'click' por 'change'.
    – iSony
    Commented el 27 dic. 2021 a las 18:10
  • 1
    Tengo entendido que cuando haces clic sobre alguna de las opciones del select, realmente estás es haciendo un evento click sobre el select, puedes probar esta cambiando el change por click, y verás que cada vez que seleccionas una opción, realmente el click actual sobre el select y no el option. Commented el 27 dic. 2021 a las 18:38

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.