Appel � une fonction

**higepiyo59** · 03/09/2017, 12h04

Bonjour, je viens chercher un peu d'aide sur ce forum car je cherche � cr�er une div cliquable permettant de faire dispara�tre le titre de la div pour faire appara�tre le texte descriptif.
Comme sur les tablettes le hover ne fonctionne pas, toujours j'ai regard� un peu du c�t� de javascript.

Le code est relativement simple et "fonctionnel" si ce n'est qu'on est oblig� de cliquer deux fois pour que le display du titre et du texte changent.

J'ai plac� un alert() dans la fonction et je remarque que lors du premier clic les variables titre et paragraphe ne sont pas initialis�.

Savez vous pourquoi la fonction � un tel comportement ?

Merci d'avance pour votre aide.

Voici le code de la fonction ci dessous:

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<style>
.show{
        display: none;
}
 
div{
border: solid black 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div onclick=myFunction()>
<center><h2 id="titre">TITRE</h2></center>
<p class="show" id="paragraphe" >PETIT TEXT.</p>
</div>
<script>
function myFunction() {
    var titre = document.getElementById("titre").style.display;
    var paragraphe = document.getElementById("paragraphe").style.display;
    
    alert(titre + " et " + paragraphe);
    
    if( titre == "block" ){
        document.getElementById("titre").style.display = "none";
        document.getElementById("paragraphe").style.display = "block";
    }
    else{
        document.getElementById("paragraphe").style.display = "none";
        document.getElementById("titre").style.display = "block";
    }
}
</script>
 
</body>
</html>

**ProgElecT** · 03/09/2017, 12h22

Salut

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<style>
.show{
        display: none;
}
 
div{
border: solid black 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div onclick="myFunction()">
<center><h2 id="titre" style="display:block">TITRE</h2></center>
<p class="show" id="paragraphe" >PETIT TEXT.</p>
</div>
<script>
function myFunction() {
    var titre = document.getElementById("titre").style.display;
    var paragraphe = document.getElementById("paragraphe").innerHTML;
    
    alert(titre + " et " + paragraphe);
    
    if( titre == "block" ){
        document.getElementById("titre").style.display = "none";
        document.getElementById("paragraphe").style.display = "block";
    }
    else{
        document.getElementById("paragraphe").style.display = "none";
        document.getElementById("titre").style.display = "block";
    }
}
</script>
 
</body>
</html>

Voir la modification ligne 17 et 23.

**higepiyo59** · 03/09/2017, 14h08

Merci pour ton aide ProgElecT, �a fonctionne � merveille !

Par contre le innerHTML n'est pas pr�vu pour afficher du texte dans la page ?

Je ne saisi pas tr�s bien compri la modif.