0

Sou iniciante em javascript, não consigo descobrir a sintaxe certa para a codificação funcionar. Obs: Eu estou tentando fazer a alternância de imagem a cada click.

HTML)

    <label id='a'>
        <img class='cadeira' src='./img/cadeira.png'/>
        <img class='cadeira2' src='./img/cadeira2.png'/>
    </label>

JS)

function toggleImage(){
        const elChildren = document.getElementById("a").children;
        const img2 = elChildren[1];

            if(img2.style.display=="none"){
                img2.style.display="block";
                console.log("trocou");
            }
            else{
                img2.style.display="none";
                console.log("não trocou");
            }
    }
    function eventos(){
        const cadeira=document.getElementById("a");

        cadeira.addEventListener("click",toggleImage);

    }
    window.addEventListener("load",eventos);

O meu console.log acaba retornando para "não trocou".

Se alguém puder me ajudar por favor, eu realmente preciso desse código para um projeto muito em breve. Muito obrigada desde já.

2
  • Deu certo alguma resposta?
    – novic
    Commented 5/03/2020 às 15:31
  • Deu certo obg, e consegui bastante base, agora estou tentando um jeito com várias labels kkkkk.
    – Isa Bella
    Commented 5/03/2020 às 22:49

4 Respostas 4

1

Isa Bella, tentei fazer o mínimo possível de alterações no seu código, para deixar mais fácil pra você. Dá uma olhada se é isso que você queria.
Eu acrescentei CSS para deixar quaisquer imagens (fora a primeira) ocultas.
Com Js, então, basta trocar a posição das imagens no DOM, fazendo uma literal "dança das cadeiras" (desculpe, não resisti :) )

PS.: usei defer no script que chama o javascript, assim não precisei do eventListener load (pois a página já está carregada) https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/script

//Obtém os objetos label e a coleção de cadeiras no label
let label = document.getElementById('a');
let cadeiras = document.querySelectorAll('#a img');

//Adiciona handler para click no label
label.addEventListener('click', toggleImage);

function toggleImage(){
    //troca posição das cadeiras no DOM
    label.insertBefore(cadeiras[1], cadeiras[0]);
    //avisa no console
    console.log('trocadas as cadeiras');
    //atualiza o objeto cadeiras para refletir a troca
    cadeiras = document.querySelectorAll('#a img');
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js" defer></script>
    <style>
        img{
            height: 300px;
        }
        #a{
            background-color: aqua;
        }
        #a img{
            display: none;
        }
        #a img:first-child{
            display: block;
        }
    </style>
    <title>Alternance</title>
</head>
<body>
    <label id='a'>
        <img class='cadeira' src='https://cdn.shopify.com/s/files/1/1640/2231/files/turntable_2020_OM_pu_stealth_2-min.jpg?v=2079812668809504478'/>
        <img class='cadeira2' src='https://officedepot.scene7.com/is/image/officedepot/7377876_p_realspace_tresswell_bonded_leather_high_back_chair?$OD%2DLarge$&wid=450&hei=450'/>
    </label>
</body>
</html>

2
  • Oi Paulo, muito obrigada pelo código, esclareceu os meus pensamentos. Tentei usar o mesmo raciocínio para várias labels, mas infelizmente só funciona na última label. Queria passar o código aqui para vc poder analisar mas o limite de linhas e a formatação do comentário me impedem. Vc teria alguma dica para me ajudar?
    – Isa Bella
    Commented 5/03/2020 às 22:45
  • Pode deixar Paulo, consegui desenvolver o código, mas muito obrigada kkkkk
    – Isa Bella
    Commented 5/03/2020 às 23:00
1

A sua lógica não está correta, resolvi então escrever um exemplo minimo, onde:

  • Inicializo as imagens onde somente a primeira ficará visível.
  • Ao clicar na imagem verifica se já é a última e se não for repassa a visibilidade para outra e assim por diante e se for a última volta para primeira.

let iniFoto = -1;
function toggleImage() {
  const elChildren = document.getElementById("a").children;   
  if (iniFoto + 1 === elChildren.length) {
    elChildren[iniFoto].style.display = 'none';
    iniFoto = 0;
    elChildren[iniFoto].style.display = 'block';    
  } else {
    elChildren[iniFoto].style.display = 'none';
    iniFoto++;
    elChildren[iniFoto].style.display = 'block';  
  }  
}

function eventos() {
  const cadeira = document.getElementById("a");
  cadeira.addEventListener("click", toggleImage);
}

function initImage() {
  const elChildren = document.getElementById("a").children; 
  iniFoto ++;
  for (i = 0; i < elChildren.length; i++) {
    if (i === iniFoto) {
      elChildren[i].style.display = 'block';
    } else {
      elChildren[i].style.display = 'none';
    }
  }
}
window.addEventListener("load", eventos);
initImage();
<label id="a">
   <img class="cadeira" src="https://fakeimg.pl/100/?text=1"/>
   <img class="cadeira" src="https://fakeimg.pl/100/?text=2"/>
   <img class="cadeira" src="https://fakeimg.pl/100/?text=3"/>
   <img class="cadeira" src="https://fakeimg.pl/100/?text=4"/>
   <img class="cadeira" src="https://fakeimg.pl/100/?text=5"/>
</label>

5
  • Virgilio, eu fui executar o código dele aqui e funcionou '-' Que bruxaria é essa kkk ? Commented 5/03/2020 às 1:51
  • Se fala aqui na minha resposta ? isso já tem faz tempo é um recurso visual para Html, Javascript e Css.
    – novic
    Commented 5/03/2020 às 1:52
  • Não, eu estou dizendo o código do autor da pergunta. O código dele funciona perfeitamente no meu mas não funciona no dele e nem no seu aparentemente. Commented 5/03/2020 às 1:53
  • Cara o código não funciona eu testei @JeanExtreme002
    – novic
    Commented 5/03/2020 às 1:55
  • Ah deixa quieto, eu que entendi errado a pergunta. Você tem razão. Commented 5/03/2020 às 1:56
1

Por padrão, uma imagem não é elemento de bloco (block), é um elemento de linha (inline), portanto não use .style.display = "block"; em vez disso use .style.display = "inline" para mostrar a imagem.

Para alternar entre as duas imagens, uma delas tem que estar oculta pelo CSS, então quando você clicar numa irá ocultá-la e mostrar a outra e vice-versa.

Podes fazer desta forma:

function toggleImage(){
   const elChildren = document.getElementById("a").children;
   const img1 = elChildren[0]; // primeira imagem
   const img2 = elChildren[1]; // segunda imagem

   if(img2.style.display=="none" || !img2.style.display){
      img1.style.display="none";
      img2.style.display="inline";
      //console.log("trocou");
   }
   else{
      img1.style.display="inline";
      img2.style.display="none";
      //console.log("não trocou");
   }
}

function eventos(){
   const cadeira=document.getElementById("a");
   cadeira.addEventListener("click",toggleImage);
}
window.addEventListener("load",eventos);
#a img{
   width: 100px;
   height: 100px;
}

/*ESCONDE A SEGUNDA IMAGEM*/
.cadeira2{
   display: none;
}
<label id='a'>
   <img class='cadeira' src='https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg'/>
   <img class='cadeira2' src='https://tinyjpg.com/images/social/website.jpg'/>
</label>

-1

Troque seu bloco if por apenas esta linha:

img2.style.display = img2.style.display == 'none' ? 'block': 'none';

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .