Pour toutes les discussions javascript, jQuery et autres frameworks
-
moon136
- Messages : 51
- Enregistré le : 12 août 2017, 15:00
Message
par moon136 » 24 août 2017, 21:51
bonjour
dans mon fichier html jai la fonction onclik que je dois transformer par addEventListener à mettre dans mon fichier js..
voici mes codes :
Code : Tout sélectionner
<input type="button" value="Chrono" onclick="chrono()">
<input type="button" value="Tempo" onclick="clearTimeout(compte)">
<input type="button" value="RaZ" onclick="rasee()">
Code : Tout sélectionner
var centi=0
var secon=0
var minu=0
function chrono(){
centi++; //incrémentation des dixièmes de 1
if (centi>9){centi=0;secon++} //si les dixièmes > 9,
if (secon>59){secon=0;minu++} //si les secondes > 59,
document.forsec.secc.value=" "+centi
document.forsec.seca.value=" "+secon
document.forsec.secb.value=" "+minu
compte=setTimeout('chrono()',100)
//tous les 10° de secondes
}
function rasee(){
clearTimeout(compte)
centi=0;
secon=0;
minu=0;
document.forsec.secc.value=" "+centi
document.forsec.seca.value=" "+secon
document.forsec.secb.value=" "+minu
}
je n'arrive pas a transformer avec la fonction addEventListener. est ce que je dois mettre document.getElementById ? sinon comment le remplacer par document.forsec.secc.value=" "+centi
merci de votre aide
-
Frosty
- Messages : 123
- Enregistré le : 20 juil. 2017, 13:23
- Localisation : Grenoble
Message
par Frosty » 24 août 2017, 23:44
Je dirais, par exemple pour remplacer le
onlick="chrono()" du premier élément par
addEventListener() :
Modifier le HTML bien sûr :
- retirer le onclick
- rajouter au moins un
id pour pouvoir utiliser
document.getElementById()
Ensuite côté JS rajouter :
Code : Tout sélectionner
document.getElementById('demarrer-chrono').addEventListener('click', chrono);
Voir
http://www.toutjavascript.com/reference ... stener.php
Même principe pour les autres champs.
-
moon136
- Messages : 51
- Enregistré le : 12 août 2017, 15:00
Message
par moon136 » 25 août 2017, 15:27
bonjour
j'ai essayer mais ca ne fonctionne pas
code html
Code : Tout sélectionner
<form name="forsec">
<input type="text" size="3" name="secb" value="00">
<input type="text" size="3" name="seca" value="00">
<input type="text" size="3" name="secc"value ="00">
<input type="button" id="demarre" value="Start" />
<input type="button" id="pause" value="Pause" />
<input type="button" id="efface" value="clear" />
</form>
js
Code : Tout sélectionner
var centi=0 // initialise les dixièmes
var secon=0 //initialise les secondes
var minu=0 //initialise les minutes
var demarre = document.getElementById('demarre').value;
var pause = document.getElementById('pause').value;
var efface = document.getElementById('efface').value;
function chrono(){
centi++; //incrémentation des dixièmes de 1
if (centi>9){centi=0;secon++} //si les dixièmes > 9,
//on les réinitialise à 0 et on incrémente les secondes de 1
if (secon>59){secon=0;minu++} //si les secondes > 59,
//on les réinitialise à 0 et on incrémente les minutes de 1
document.forsec.secc.value=" "+centi //on affiche les dixièmes
document.forsec.seca.value=" "+secon //on affiche les secondes
document.forsec.secb.value=" "+minu //on affiche les minutes
compte=setTimeout('chrono()',100) //la fonction est relancée
//tous les 10° de secondes
document.getElementById("demarre").action=true;
}
function rasee(){ //fonction qui remet les compteurs à 0
document.getElementById("demarre").action=false;
centi=0;
secon=0;
minu=0;
document.forsec.secc.value=" "+centi
document.forsec.seca.value=" "+secon
document.forsec.secb.value=" "+minu
}
function stop(){
clearTimeout(compte);//arrête la fonction chrono()
document.getElementById("demarre").action=false;
}
window.addEventListener("load",function(){
document.getElementById('demarre').addEventListener('click', chrono);
document.getElementById('pause').addEventListener('click', stop);
document.getElementById('efface').addEventListener('click', rasee);
});
en fait dans le document js je sais pas comment régler, si je dois supprimer quelque chose ou modifier,,?
merci
-
Frosty
- Messages : 123
- Enregistré le : 20 juil. 2017, 13:23
- Localisation : Grenoble
Message
par Frosty » 25 août 2017, 20:07
Déjà je vois un problème de syntaxe au niveau de l'attribut "value" du champ "secc"
Il y a une erreur dans la console ? Si oui laquelle ?
-
moon136
- Messages : 51
- Enregistré le : 12 août 2017, 15:00
Message
par moon136 » 25 août 2017, 21:38
merci
ah oui ya une erreur :
SyntaxError: expected expression, got ')'[En savoir plus] script.js:45:2
mais la ca marche toujour pas..
-
moon136
- Messages : 51
- Enregistré le : 12 août 2017, 15:00
Message
par moon136 » 25 août 2017, 21:57
enfin je vous pas quel erreur de syntaxe jai debogger et ya plus de message d'erreur mais ca ne marche pas
j'ai une autre erreur dans la console : SyntaxError: missing } after function body[En savoir plus] script.js:48
</pre><menu type="context" id="actions">(surligné)
-
moon136
- Messages : 51
- Enregistré le : 12 août 2017, 15:00
Message
par moon136 » 26 août 2017, 14:18
j'utilise Firefox, mais la je viens d'essayer dans chrome il marche pas non plus. je pense pas qu'il y ai un soucis dans le fichier js, ou html
Code : Tout sélectionner
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="utf-8" />
<title>exercice11</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="docstyle.css" />
</head>
<body>
<form name="forsec">
<input type="text" size="3" name="secb" value="00">
<input type="text" size="3" name="seca" value="00">
<input type="text" size="3" name="secc" value="00">
<input type="button" id="demarre" value="Start" />
<input type="button" id="pause" value="Pause" />
<input type="button" id="efface" value="clear" />
</form>
</body>
</html>
-
Frosty
- Messages : 123
- Enregistré le : 20 juil. 2017, 13:23
- Localisation : Grenoble
Message
par Frosty » 26 août 2017, 14:32
Ok je vais essayer sans passer par jsfiddle
Pour le contenu de script.js je vais prendre la dernière version que tu as postée ici.
-
moon136
- Messages : 51
- Enregistré le : 12 août 2017, 15:00
Message
par moon136 » 26 août 2017, 15:27
Frosty a écrit : ↑26 août 2017, 14:32
Ok je vais essayer sans passer par jsfiddle
Pour le contenu de script.js je vais prendre la dernière version que tu as postée ici.
ok merci beaucoup