Autor Tema: Javascript, cambiar imagen y cambiar texto dinámicamente según elección usuario (Leído 5602 veces)

bermartinv · « **en:** 23 de Noviembre 2016, 11:32 »

Hola chicos, necesito una ayuda.

Tengo el siguiente código que hace que cuando el usuario quiera se muestre un texto o se oculte, pero también quiere que cambie la imagen, cuando no está el texto la imagen tiene unas flechas hacia abajo y cuando está el texto tiene unas flechas hacia arriba. Si que consigo que aparezca el texto cuando yo quiero pero quiero cambiar la imagen y no consigo ver cómo hacerlo.

Código: [Seleccionar]

<div class="pulsador">
    <p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
    <p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
    <p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
    <p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
    <p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
    <p>Aquí pongo el texto</p>
</div>

Y el código Javascript que tengo

Código: [Seleccionar]

window.onload = function(){
    mostrar();
} 

function mostrar(){
    var items, show , imagenes;
    show = false;
    items = document.querySelectorAll(".pulsador");
    imagenes = document.querySelectorAll(".flecha");
    for ( var i = 0 ; i < items.length ; i++){
        items[i].addEventListener("click",aparecer);
    }

    function aparecer(){
        if (show == false){
        this.nextElementSibling.style.display = "block";
        show = true;
        }else{
        this.nextElementSibling.style.display = "none";
        
        show = false;
        }
    }
}

pedro,, · « **Respuesta #1 en:** 23 de Noviembre 2016, 13:30 »

Hola bermartinv, cuanto tiempo sin leerte.

Si no te he entendido mal, esto te valdrá, usé dos imagenes al azar, pruebaló:

Código: [Seleccionar]

     <!DOCTYPE html>
    <html>
    <head>
      <title>Ejemplo aprenderaprogramar.com JavaScript CU01188E</title>
      <meta charset="utf-8">
      <script>
    window.onload = function(){
        mostrar();
    } 

    function mostrar(){
        var items, show , imagenes;
        show = false;
        items = document.querySelectorAll(".pulsador");
        imagenes = document.querySelectorAll(".flecha");
        for ( var i = 0 ; i < items.length ; i++){
            items[i].addEventListener("click",aparecer);
        }

        function aparecer(){
            if (show == false){
            this.nextElementSibling.style.display = "block";
            this.firstChild.nextSibling.firstElementChild.src = 'https://cdn.pixabay.com/photo/2014/01/29/05/49/right-254097_960_720.png';
            console.log(this.firstChild.nextSibling.firstElementChild);
            show = true;
            }else{
            this.nextElementSibling.style.display = "none";
            this.firstChild.nextSibling.firstElementChild.src = 'http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png';
            show = false;
            }
        }
    }
    </script>
    </head>
    <div class="pulsador">
        <p>Ejemplo <img class="flecha" alt="soy una flecha" src="http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png" width="60"></p>
    </div>
    <div class="texto">
        <p>Aquí pongo el texto</p>
    </div>
    <div class="pulsador">
        <p>Ejemplo <img class="flecha" alt="soy una flecha" src="http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png" width="60"></p>
    </div>
    <div class="texto">
        <p>Aquí pongo el texto</p>
    </div>
    <div class="pulsador">
        <p>Ejemplo <img class="flecha" alt="soy una flecha" src="http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png" width="60"></p>
    </div>
    <div class="texto">
        <p>Aquí pongo el texto</p>
    </div>
    </body>
    </html>

Saludos.

bermartinv · « **Respuesta #2 en:** 23 de Noviembre 2016, 14:49 »

Muchas gracias Pedro,,
funciona perfecto

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: