Onclick event in a list show an image

Question

Onclick event in a list show an image

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I need help with an event onclick :

When you click a text within a <ul><li> list. I would like you to display an image in a div on the side.

How do I do this?

html5

asked by anonymous 18.08.2018 / 04:31

2 answers

0

By clicking on the text of <li> it executes the function, which will change the display of the image so that it can appear:

function aparecer(){
   imagem = document.getElementById("imagem");
   imagem.style.display = "block";
}

.principal{
   display: flex;
   justify-content: center;
   align-items: center;
}
.principal ul{
  list-style-type: none;
}
#imagem{
   display: none;
   width: 200px;
   height: 60px;
}
#texto{
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <title>teste</title>
</head>
<body>
  <div class="principal">
    <ul>
       <li><a onclick="aparecer()" id="texto">Clique Aqui</a></li>
    </ul>
    <div>
       <img src="https://i.imgur.com/KraVclx.gif"id="imagem" />
    </div>
  </div>
</body>
</html>

18.08.2018 / 05:42

How to receive a formData with file and form in the controller? W # Find substring in recent commit messages

score 2 · Accepted Answer

By clicking on an element in the list the image will appear in div and the text will change, and when you click again it returns. Explanation of commented code in script with //comentário aqui

function imagem(){
 var img = document.getElementById("img")
 var imagem = document.getElementById("imagem")
 if(img.style.display == "none") { //verifica se a imagem está sendo exibida, se não estiver vai executar os comandos abaixo e se tiver vai executar o else
   img.style.display="block" //exibe a imagem
   imagem.innerHTML = "CLIQUE DE NOVO" //altera o texto
 }
 else { //se a imagem estiver sendo exibida vai executar os comandos abaixo
   img.style.display="none"; //oculta a imagem
   imagem.innerHTML = "CLIQUE AQUI" //altera o texto
 }
}

.div1 {
width:50%;
float:left;
}
.div2 {
float:left;
width:50%;
}

<div class="div1">
<ul>
  <li id="imagem" onclick="imagem()" style="cursor:pointer">CLIQUE AQUI</li>
</ul>
</div>
<div class="div2">
<img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365"style="display:none;" id="img" height="35%" width="35%"/>
</div>