Utiliser la même fonction plusieurs fois avec querySelectorAll

Version imprimable

10/02/2022, 16h46
simoxxx48

Utiliser la même fonction plusieurs fois avec querySelectorAll

https://www.developpez.net/forums/d2...ryselectorall/
10/02/2022, 17h23
SpaceFrog

avec un foreach sur la collection querySelectorAll en utilisant l'indexe

Comme ceci ? j'obtiens une erreur

Citation:

Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
"use strict";
 
 
/* ___________________________Déclarer les variables et les fonctions______________________________ */
 
/* Déclaration des variables */
var item = document.querySelectorAll('.slider-item');
var str = document.querySelectorAll('.buttons--start');
var stp = document.querySelectorAll('.button--stop');
var start = 0;
var end = 0;
var diff = 0;
var timer = 0;
 
/* Fonction chrono */
function chrono(){
	end = new Date();
	diff = end - start;
	diff = new Date(diff);
	var sec = diff.getSeconds();
	item.innerHTML = sec;
	timer = setTimeout("chrono()", 10);
}
 
/* ___________________________Écouter les événements__________________________________ */
 
/* Appeler la fonction qui déclanche le chrono lorsqu'on clique sur start*/
str.forEach(x => x.onclick = chronoStart)
function chronoStart() {
	start = new Date();
	chrono();
}
 
/* Appeler la fonction qui arrête le chrono lorsqu'on clique sur stop*/
str.forEach(x => x.onclick = chronoStop)
function chronoStop() {
	clearTimeout(timer)
    this.item.innerHTML = "0";
	start = new Date();
	console.log('stop '+i);
}
 
/* Appeler la fonction qui change la couleur du background lorsque l'évenement est déclancher*/
item.forEach(x => x.onclick = myFunc)
function myFunc() {
	let bgColor = '#' + Math.random().toString(16).substr(-6);
	this.style.backgroundColor = bgColor;
}

10/02/2022, 18h30
NoSmoking

Bonjour,
surprenant ton message d'erreur attendu que tu n'affectes pas de textContent dans le code que tu montres !?!

Remarques :

• Comme tu déclares des variables globales, touts les appels à tes fonctions agiront sur ces variables donc tu n'auras pas de multi-chrono.

• Regarde à créer un objet/une class chrono.
10/02/2022, 18h40
simoxxx48

Les classes et objet c'est nouveau pour moi en JS, vous pouvez me refaire cet exemple avec cette méthode s'il vous plait ?, ça m'aidera beaucoup à comprendre l'orienté objet JS.
11/02/2022, 11h43
NoSmoking
Tu trouveras des exemples dans au moins ces deux discussions :
- sessionStorage et compte a rebours javascript ;
- Chrono JS: passer du procédural en POO.
Pour plus d'infos, il existe au moins :
- Syntaxe de base de la Classe, sur javascript.info ;
- Les Classes, sur MDN.
... qui reste très abordables

N'hésite pas si tu rencontres des obstacles ;)