1

Tengo un problema con un menú toggle y no se que pasa. Si me podéis echar un cable os agradecería.

Resulta que tento este condicional donde solo funciona el IF, pero la condición del Else no se ejecuta.

Código HTML:

 <div class="hablemos_fixed" id="hablemos_container"><a href="mailto:[email protected]">[email protected]</a></div>
<img class="icono_hablamos" id="hablamos_svg" src="./icons/Hablemos.svg" alt="mensaje_svg">

Código Javscript:


    const hablemos_svg = document.getElementById("hablamos_svg");
    const hablemos = document.getElementById("hablemos_container");


    hablemos_svg.addEventListener("click", function() {

    hablemos.classList.toggle("hablemos_fixed_active");

    if (hablemos_svg.src = "./icons/Hablemos.svg") {
        hablemos_svg.src = "./icons/cerrar.svg";
    } else {
        hablemos_svg.src = "./icons/Hablemos.svg";
    }
    });

La línea de código del "IF" si se ejecuta, o sea sí cambia el SRC de la imagen, pero cuando le voy a volver a dar a ese "boton" para que cambie el SRC, o sea se ejecte la condicion del "ELSE", no lo hace.

Se trata de un simple menú que se activa y desactiva, el toggle muestra y oculta el DIV del menú. Todo funciona menos el "ELSE".

1 respuesta 1

2

En el if no estás comparando, sino asignando, porque sólo has puesto un carácter =. Entonces el resultado es que asignas el icono Hablemos, y el if lo que evalúa es el valor asignado, que al ser una cadena es considerado true, y nunca te entra en el else.

Tienes que poner ==:

if (hablemos_svg.src == "./icons/Hablemos.svg") {

Pero con eso solucionado aparece otro problema, y es que siempre se entra en el else, osea, nunca da por bueno que el src del icono sea ./icons/Hablemos.svg.

Esto es porque hablemos_svg.src te da la ruta completa, no la relativa, puedes comprobarlo haciendo `alert(hablemos_svg.src);'

Entonces una solución es mirar si el src termina con el icono que queremos comparar, usando la función endsWidth:

if (hablemos_svg.src.endsWith("/icons/Hablemos.svg")) {

Ojo, date cuenta de que he quitado el . por el que empezaba la ruta del icono, porque eso no estará en la ruta completa. Incluso para simplificar podrías poner solamente Hablemos.svg.

He replicado el script, lo he probado y va perfecto.

8
  • A pesar de hacer eso no funciona. Incluso, si le agrego el == deja de funcionar todo el condicional. Gracias por responder. el 9 dic. 2021 a las 10:19
  • Eso es un error que está claro. Quizá tengas más. Proporciona más datos, consulta la consola del navegador a ver si aparecen errores Javascript. el 9 dic. 2021 a las 10:25
  • No aparecen errores. Y cuando hago Click en el elemento la ruta en el SRC se resalta pero sigue manteniendo la ruta del condiciona IF, no cambia a ELSE. Y la ruta que está activa en ese momento es "./icons/cerrar.svg"; o sea, se deberia ejecutar el ELSE por que no se cumple el IF. Está que me explota la cabeza con este error. Gracias por responder!! el 9 dic. 2021 a las 10:34
  • 1
    Ok, yo he editado la respuesta para explicarte por qué fallaba. el 9 dic. 2021 a las 11:09
  • 1
    No olvides marcarla como correcta @rafaelgerardo si te ha ayudado. el 9 dic. 2021 a las 11:26

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.