Utilisation de la fonction display

**skander97** · 27/02/2018, 17h15

Bonjour ,je n'arrive pas a trouvé le probléme aider moi svp

voici le code :

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
<!doctype>
<html>
<head>
<title> Afficher/masquer</title>
<script type="text/javascript">
function check_range(){
var value = document.getElementById("price1").value;
var paragraph_list=document.getElementByTagName("p");
 
var first_paragraph = paragraph_list[0];
 if (value >=80){
   display="block";}
 
 else{ display="none";}
alert(display);
first_paragraph.style.display= display;
}
</script>
</head>
<body bgcolor="lightblue">
<h1> Afficher/masquer en réponse</h1>
<form>
entrer un prix:<input type="number" id="price1"
min="1" max="100" oninput="check_range();">
</form>
<p style= "display:none;">Avertissement :vous êtes à 20% de 
la limite.</p>
</body>
</html>

**NoSmoking** · 27/02/2018, 19h13

Bonjour et bienvenue sur DVP.
Attention : ce n'est pas var paragraph_list=document.getElementByTagName("p") mais var paragraph_list=document.getElementsByTagName("p"), le s fait toute la différence.

Pas regardé le reste !

**skander97** · 27/02/2018, 19h20

Merci beaucoup

**psychadelic** · 27/02/2018, 19h34

evite de nommer tes variables avec des noms identiques à des mots-clés... (display= value=..
ton doctype est mauvais,

le même code en un peu plus propre:

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title> Afficher/masquer</title>
</head>
<body bgcolor="lightblue">
	<h1> Afficher/masquer en réponse</h1>
	<form>
		entrer un prix: <input type="number" id="price1" min="1" max="100" value="50" />
	</form>
	<p style= "display:none;">
		Avertissement :vous êtes à 20% de la limite.
	</p>
 
	<script  type="text/javascript">
 
                var
                        paragraph_list  = document.getElementsByTagName('p'),
                        Prix_1          = document.getElementById('price1')
                ; 
 
                function onchangeZZ(e) {
                        paragraph_list[0].style.display = (Prix_1.value >= 80) ? "block" : "none";
                }
 
                Prix_1.addEventListener('change', onchangeZZ, false);
 
        </script>
</body>
</html>

**skander97** · 27/02/2018, 19h38

merci

Utilisation de la fonction display

JavaScript

Vue hybride

Discussions similaires

Partager

Partager