Sujet Précédent Sujet Suivant

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:

Onclick à remplacer par addEventListener
Remplacer disque dur par ssd - Guide
Remplacer par word - Guide
Quel site pour remplacer coco - Accueil - Réseaux sociaux
Remplacer tete sur photo - Guide
Remplacer windows 7 par windows 10 - Accueil - Mise à jour

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704
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

.

Réponse 2 / 6

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

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 ?

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..?

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704 > 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...

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 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 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

Réponse 3 / 6

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

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704
25 août 2017 à 17:25

Il manque surtout des points virgules dans ton js... lignes 48 49 50 ..

Réponse 4 / 6

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

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704
25 août 2017 à 23:04

Vérifie dans la console les messages d erreur et reposte nous ton code modifié

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

Posez votre question

Réponse 5 / 6

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

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704
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 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704
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éponse 6 / 6

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

Discussions similaires

Remplacer espace par retour ligne sur txt ???

comment remplacer un #div/0! par une cellule vide

Forum Javascript

Questions et réponses sur Javascript