I need an invisible text to become visible in javascript

Asked

Viewed 439 times

-2

My problem is this: I need an invisible text to be visible when the user clicks on the image. So far so good, but I can’t make the text start invisible on the page.. This is my program (these are signs):

<script language = "javascript">
function mudar(id) {
        var display = document.getElementById(id).style.display;
        if(display == "none")
            document.getElementById(id).style.display = 'block';
		else
			document.getElementById(id).style.display = 'none';
             
	}
</script>
<body>
<div style = "text-align: center;" id = "imagens">
imagens...
.
.
.
</div>

<p><a href = "javascript:mudar('aquario')"></a></p>
<div id = "aquario">
<p>Texto....</p>
 </div>

<p><a href = "javascript:mudar('aries')"></a></p>
<div id = "aries">
<p>Texto....</p>
 </div>  //etc..
</body>

It’s almost the way I want it, but when the page loads, the text q should be invisible is visible, when I click on the image it disappears and if I click again it reappears, but I need the page to load with it invisible and I found no solution to my problem. I hope someone can help me! Thank you! Note: Can not run the program because I did not put all the details, I just put the q found necessary for information

javascript visibility

1 answer

0


1 - add this css display:none" on the Divs

<div id="aquario" style="display:none">
<div id="aries" style="display:none">
.....................................
.....................................

2 - The event onclick="mudar()" directly in the images

<img .....  onclick="mudar('aquario')">
<img .....  onclick="mudar('aries')">
.....................................
.....................................

3 - these lines 

 <p><a href = "javascript:mudar('aquario')"></a></p>
 <p><a href = "javascript:mudar('aries')"></a></p>
 .................................................
 ................................................

are unnecessary

Example 

function mudar(id) {
        var display = document.getElementById(id).style.display;
        if(display == "none")
            document.getElementById(id).style.display = 'block';
        else
            document.getElementById(id).style.display = 'none';
    }
 <!DOCTYPE html>
<div style = "text-align: center;" id="imagens">
<img border="0" src="https://i.stack.imgur.com/jtV5d.png" width="33" height="42" onclick="mudar('aquario')">
<img border="0" src="https://i.stack.imgur.com/xDmzy.png" width="33" height="42" onclick="mudar('aries')">
</div>


<div id="aquario" style="display:none">
<p>Vai sobrar disposição para correr atrás de suas metas. Mudanças no visual podem render elogios. Uma amizade pode atravessar altos e baixos: paciência! Sexo em alta, mas fuja de brigas. Palpites: 15, 96 e 78. Cor: azul-claro.</p>
 </div>

<div id="aries" style="display:none">
<p>Imprevistos podem surgir: vá com calma e preste atenção em tudo o que fizer. Na vida a dois, seu amor pode estar precisando da sua ajuda. Na cama, porém, a paixão vai pegar fogo! Palpites: 05, 14 e 95. Cor: azul-marinho.</p>
 </div>

An alternative solution You can do it with CSS only, using the target selector:

div { display: none }         /* Por padrão, os divs iniciam ocultos. */
div:target { display: block } /* Exibe quando o elemento é alvo. */
<a href='#aquario'>
  <img border="0" src="https://i.stack.imgur.com/jtV5d.png" width="33" height="42">

</a>
<a href='#aries'>
<img border="0" src="https://i.stack.imgur.com/xDmzy.png" width="33" height="42">
</a>

<div id='aquario'>
  <p>Vai sobrar disposição para correr atrás de suas metas. Mudanças no visual podem render elogios. Uma amizade pode atravessar altos e baixos: paciência! Sexo em alta, mas fuja de brigas. Palpites: 15, 96 e 78. Cor: azul-claro.</p>
</div>
<div id='aries'>
  <p>Imprevistos podem surgir: vá com calma e preste atenção em tudo o que fizer. Na vida a dois, seu amor pode estar precisando da sua ajuda. Na cama, porém, a paixão vai pegar fogo! Palpites: 05, 14 e 95. Cor: azul-marinho.</p>
</div>

  • Thank you so much, you really helped me!! Thank you msm!

Browser other questions tagged javascript visibility

You are not signed in. Login or sign up in order to post.