Menu

Onclick à remplacer par addEventListener

moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 24 août 2017 à 21:54 - Dernière réponse : moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention
- 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


Afficher la suite 

Votre réponse

14 réponses

Meilleure réponse
jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 25 août 2017 à 02:48
1
Merci
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

.

Merci jordane45 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

CCM a aidé 24469 internautes ce mois-ci

Commenter la réponse de jordane45
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 25 août 2017 à 15:29
0
Merci
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
Help-Jason 1861 Messages postés mardi 28 juin 2011Date d'inscription 18 juin 2018 Dernière intervention - 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 ?
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention > Help-Jason 1861 Messages postés mardi 28 juin 2011Date d'inscription 18 juin 2018 Dernière intervention - 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..?
jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention > moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 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...
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention > jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 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
Commenter la réponse de moon136
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 25 août 2017 à 17:21
0
Merci
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
jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 25 août 2017 à 17:25
Il manque surtout des points virgules dans ton js... lignes 48 49 50 ..
Commenter la réponse de moon136
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 25 août 2017 à 22:49
0
Merci
merci jordane , mais ça ne marche toujours pas
jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 25 août 2017 à 23:04
Vérifie dans la console les messages d erreur et reposte nous ton code modifié
Commenter la réponse de moon136
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 25 août 2017 à 23:32
0
Merci
<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
jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 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
jordane45 21439 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juin 2018 Dernière intervention - 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...
Commenter la réponse de moon136
moon136 71 Messages postés samedi 12 août 2017Date d'inscription 17 avril 2018 Dernière intervention - 26 août 2017 à 19:29
0
Merci
merci, le script marche sur jsfiddle uniquement pas sur les navigateurs

https://jsfiddle.net/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
Commenter la réponse de moon136