Onclick à remplacer par addEventListener

Fermé
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 - Modifié le 24 août 2017 à 23:16
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 - 26 août 2017 à 19:29
Bonjour,

dans mon fichier html jai la fonction onclik que je dois transformer par addEventListener à mettre dans mon fichier js..

voici mes codes :




<input type="button" value="Chrono" onclick="chrono()">

<input type="button" value="Tempo" onclick="clearTimeout(compte)">
<input type="button" value="RaZ" onclick="rasee()">


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


A voir également:

6 réponses

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
25 août 2017 à 02:48
Bonjour,

Il faut mettre des ID à tes boutons ... puis tu pourras faire :
  var el = document.getElementById("id_du_bouton"); 
       el.addEventListener("click", action, false); 


Un peu de lecture : https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

.
1
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
25 août 2017 à 15:29
merci j'ai essayé d'appliquer mais ca ne marche pas:

<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" />


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('demarrer').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 de ton aide jordane
0
Utilisateur anonyme
25 août 2017 à 15:32
document.getElementById('demarrer').addEventListener('click', chrono)

L'ID c'est "demarre" et pas "demarrer". La console affiche quoi comme erreur ?
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 > Utilisateur anonyme
25 août 2017 à 15:43
merci j'ai rectifier, maintenant dans la console j'ai l'erreur suivante :

TypeError: document.getElementById(...) is null[En savoir plus] script.js:6:15

var demarre = document.getElementById('demarre').value;


ma var est fausse, ou je dois supprimer..?
0
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703 > moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
25 août 2017 à 15:48
Déjà... à quel moment charges tu ton JS ?
Après le chargement de ta page ??

Sachant qu'il est fortement conseillé de placer tes JS ... a la fin de ton document.. juste avant le /body

car si tu l'as placé avant... normal que les getElementById ne fonctionnent pas... la page n'étant pas chargée et donc les éléments n'existant pas encore...
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 > jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024
25 août 2017 à 16:49
Je le met ici au niveau du head enfin pour chacun de mes script je fais comme ca..

<!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>


mais j'ai tester avnt le </body> mais ca marche pas non plus
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
25 août 2017 à 17:21
Ah la il y a une erreur ds la console:
SyntaxError: missing } after function body[En savoir plus] script.js:48


</pre><menu type="context" id="actions"><menuitem id="goToLine" label="Aller à la ligne…" accesskey="l"></menuitem><menuitem id="wrapLongLines" label="Retour à la ligne automatique" type="checkbox" checked="true"></menuitem><menuitem id="highlightSyntax" label="Coloration syntaxique" type="checkbox" checked="true"></menuitem></menu></body></html>

ce qu'il y a en gras qui est surligné dans la console
0
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
25 août 2017 à 17:25
Il manque surtout des points virgules dans ton js... lignes 48 49 50 ..
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
25 août 2017 à 22:49
merci jordane , mais ça ne marche toujours pas
0
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
25 août 2017 à 23:04
Vérifie dans la console les messages d erreur et reposte nous ton code modifié
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
25 août 2017 à 23:32
<body>

<form name="forsec">
<input type="text" size="3" id="secb" name="secb" value="00">
<input type="text" size="3" id="seca" name="seca" value="00">
<input type="text" size="3" id="secc" 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>

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;

var compte
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
var centi = parseInt(document.getElementById("secc").value);
			var secon = parseInt(document.getElementById("seca").value);
			var minu = parseInt(document.getElementById("secb").value);
			
compte=setTimeout('chrono()',100) //la fonction est relancée
//tous les 10° de secondes
document.getElementById("demarre").disabled=true;
}
	
			

function rasee(){ //fonction qui remet les compteurs à 0
document.getElementById("demarre").disabled=false;
centi=0;
secon=0;
minu=0;
document.getElementById("secc").value =centi;
document.getElementById("seca").value =secon;
document.getElementById("secb").value =minu; 

function stop(){
			clearTimeout(compte);//arrête la fonction chrono()
			document.getElementById("demarre").disabled=false;
		}
		
 window.addEventListener("load",function(){
document.getElementById("demarre").addEventListener("click", chrono);
document.getElementById("pause").addEventListener("click", stop);
document.getElementById("efface").addEventListener("click", rasee);
 });
 



merci
0
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
26 août 2017 à 17:08
- Tu ne nous a pas dit ce qu'il y avait dans la console
- Il nous faut le code HTML COMPLET de ta page ... pour voir où tu charges ton JS
0
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
26 août 2017 à 17:08
Ah.. et il manque encore un point-virgule sur une de tes lignes... je te laisse la chercher par toi même...
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
26 août 2017 à 19:29
merci, le script marche sur jsfiddle uniquement pas sur les navigateurs

https://jsfiddle.net/FrostyZ/3pLh4r8y/

voici mon html complet mais bon le soucis est dans le fichier js

!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>


merci
0