Onclick à remplacer par addEventListener

Pour toutes les discussions javascript, jQuery et autres frameworks
moon136
Messages : 51
Enregistré le : 12 août 2017, 15:00

Onclick à remplacer par addEventListener

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

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Onclick à remplacer par addEventListener

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()

Code : Tout sélectionner

<input id="demarrer-chrono" type="button" value="Chrono">
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

Re: Onclick à remplacer par addEventListener

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

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Onclick à remplacer par addEventListener

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

Re: Onclick à remplacer par addEventListener

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

Re: Onclick à remplacer par addEventListener

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é)

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Onclick à remplacer par addEventListener

Message par Frosty » 26 août 2017, 13:23

Salut

Pour moi ton script fonctionne : https://jsfiddle.net/FrostyZ/3pLh4r8y/ (j'utilise Chrome 60)

Il ne fonctionne pas sur quel navigateur ?

moon136
Messages : 51
Enregistré le : 12 août 2017, 15:00

Re: Onclick à remplacer par addEventListener

Message par moon136 » 26 août 2017, 14:18

Frosty a écrit :
26 août 2017, 13:23
Salut

Pour moi ton script fonctionne : https://jsfiddle.net/FrostyZ/3pLh4r8y/ (j'utilise Chrome 60)

Il ne fonctionne pas sur quel navigateur ?
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>

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Onclick à remplacer par addEventListener

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

Re: Onclick à remplacer par addEventListener

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

Répondre