Signaler

Onclick à remplacer par addEventListener

Posez votre question moon136 30Messages postés samedi 12 août 2017Date d'inscription 6 octobre 2017 Dernière intervention - Dernière réponse le 26 août 2017 à 19:29 par moon136
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


Utile
+1
plus moins
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

.
Cette réponse vous a-t-elle aidé ?  
Donnez votre avis
Utile
+0
plus moins
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 1611Messages postés mardi 28 juin 2011Date d'inscription 10 octobre 2017 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 ?
Répondre
moon136 30Messages postés samedi 12 août 2017Date d'inscription 6 octobre 2017 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..?
Répondre
jordane45 18393Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 10 octobre 2017 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...
Répondre
moon136 30Messages postés samedi 12 août 2017Date d'inscription 6 octobre 2017 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
Répondre
Donnez votre avis
Utile
+0
plus moins
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 18393Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 10 octobre 2017 Dernière intervention - 25 août 2017 à 17:25
Il manque surtout des points virgules dans ton js... lignes 48 49 50 ..
Répondre
Donnez votre avis
Utile
+0
plus moins
merci jordane , mais ça ne marche toujours pas
jordane45 18393Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 10 octobre 2017 Dernière intervention - 25 août 2017 à 23:04
Vérifie dans la console les messages d erreur et reposte nous ton code modifié
Répondre
Donnez votre avis
Utile
+0
plus moins
<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 18393Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 10 octobre 2017 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
Répondre
jordane45 18393Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 10 octobre 2017 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...
Répondre
Donnez votre avis
Utile
+0
plus moins
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
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !