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.