Vu mètre

Résolu/Fermé
calimm Messages postés 32 Date d'inscription mercredi 1 juin 2011 Statut Membre Dernière intervention 18 juillet 2013 - 8 févr. 2012 à 14:52
AASPRONI Messages postés 67 Date d'inscription mardi 7 février 2012 Statut Membre Dernière intervention 21 octobre 2013 - 10 févr. 2012 à 07:30
Bonjour,

J'essaye de faire un Vu mettre grace à de HTML, du javascript, du CSS et de L'Ajax.
Pour le moment, j'ai crée un DIV et j'ai une fonction javaScript qui permet de modifier la hauteur et la couleur du DIV.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VU mètre</title>
    <style type="text/css">
	#mydiv{
	position:relative;
	display:block;
	width:600px;
	height:50px;
	background-color:white;
	border-width:2px;
	border-style:solid;
	border-color:black;
	}
    </style>
   <script type="text/javascript">
	function modify(value){
		alert("ok");
		if(value >= 0 && value < 80){
			mydiv.style.height = value;
			mydiv.style.background-color = #33ff11;
		} else if(value >= 80 && value < 95){
			mydiv.style.height = value;
			mydiv.style.background-color = #F0FF1D;
		} else if(value >= 95 && value <= 100){
			mydiv.style.height = value;
			mydiv.style.background-color = #FF3B1D;
		} else {
			alert("Valeur incorrecte");
		}
	}
   </script>
 </head>
 <body onload="modify(30);">
	<div id="mydiv"></div>
 </body>
</html>


Seulement; rien ne se passe, peut importe le nombre que je met en argument.

Merci d'avance
A voir également:

1 réponse

AASPRONI Messages postés 67 Date d'inscription mardi 7 février 2012 Statut Membre Dernière intervention 21 octobre 2013 8
10 févr. 2012 à 07:30
Essaie ceci et dit moi si ça marche.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VU mètre</title>
<style type="text/css">
#mydiv{
position:relative;
display:block;
width:600px;
height:50px;
background-color:white;
border-width:2px;
border-style:solid;
border-color:black;
}
</style>
<script type="text/javascript">
function modify(value){
alert("ok");
if(value >= 0 && value < 80){
document.getElementById("mydiv").style.height = value+"px";
document.getElementById("mydiv").style.backgroundColor="#33ff11";
} else if(value >= 80 && value < 95){
document.getElementById("mydiv").style.height = value+"px";
document.getElementById("mydiv").style.backgroundColor="#F0FF1D";
} else if(value >= 95 && value <= 100){
document.getElementById("mydiv").style.height = value+"px";
document.getElementById("mydiv").style.backgroundColor="#FF3B1D";
} else {
alert("Valeur incorrecte");
}
}
</script>
</head>
<body onload="modify(30);">
<div id="mydiv"></div>
</body>
</html>
2