Dupliquer des boutons d'incrémentation

Version imprimable

Bonjour
j'ai dupliquer des boutons avec leurs valeurs respectives dans des boucles for
avec comme boutons : guessSubmit1; guessSubmit2; guessSubmit3 etc...
valeur : nbr1; nbr2; nbr3 etc...
avec du javascript pour incrémenter mes valeurs comme suit :

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
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
	<body>
	<table><tr>
<?php for ($i=1; $i<10; $i++){ ?> 
    <th><button class="guessSubmit<?=$i?>" >dl</button></th>
   <?php } ?>
	</tr><tr>
	<?php for ($i=1; $i<10; $i++){ ?>
	 <th class="nbr<?=$i?>" >0</th>
	 <?php } ?>
	</tr></table>
 
    <?php for ($i=1; $i<10; $i++){ ?>
   <script>
   let guessSubmit1 = document.querySelector(.guessSubmit1);
   let nbrText1 = document.querySelector(.nbr1).firstChild;
 
   function checkGuess1() {
     nbrText1.nodeValue++;
   }
   guessSubmit1.addEventListener("click", checkGuess1);
   </script>
   <?php } ?> 
 </body>
</html>

Dans l'exemple j'ai mis toutes mes variables à 1 pour voir si ça passe mais à regret
pouvez-vous m'aider svp

08/11/2023, 13h58
sylvain257

Bonjour,

Il faudrait davantage d'informations et surtout le contexte. En ce qui me concerne, j'arrive pas à visualiser et à savoir ce que tu souhaites faire.

A+

bon ben encore une fois j'ai réponces à mes questions...

Code:

1
2
   let guessSubmit1 = document.querySelector(".guessSubmit1");
   let nbrText1 = document.querySelector(".nbr1").firstChild;

au lieu de

Code:

1
2
   let guessSubmit1 = document.querySelector(.guessSubmit1);
   let nbrText1 = document.querySelector(.nbr1).firstChild;

voici le code qui fonctionne :

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
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
	<body>
	<table><tr>
<?php for($i=1; $i<10; $i++){ ?>
     <th><button class="guessSubmit<?=$i?>">dl</button></th>
<?php } ?>
   </tr><tr>
<?php for($i=1; $i<10; $i++){ ?>	
     <th><p class="nbr<?=$i?>">0</p></th>
 <?php } ?>
   </tr></table>
<?php for($i=1; $i<10; $i++){ ?>
<script> 
let guessSubmit<?=$i?> = document.querySelector(".guessSubmit<?=$i?>");
let nbrText<?=$i?> = document.querySelector(".nbr<?=$i?>").firstChild;
 
function checkGuess() {
    nbrText<?=$i?>.nodeValue++;
}
 
guessSubmit<?=$i?>.addEventListener("click", checkGuess);
 
    </script>
<?php } ?>    
 </body>
</html>

Bonjour,
on ne peut pas te laisser partir dans cette direction, si tu as 3000 boutons tu crées 3000 fonctions :calim2:

Une seule fonction est capable de gérer tes n boutons.

A partir de ton code, un exemple de ce que tu aurais pu écrire :
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <table> <tr> <?php for ($i = 1; $i < 10; $i++) { ?> <td><button class="btn-inc">dl</button></td> <?php } ?> </tr> <tr> <?php for ($i = 1; $i < 10; $i++) { ?> <td><p class="champ-inc">0</p></td> <?php } ?> </tr> </table> <script> // une seule et unique fonction const btns = document.querySelectorAll(".btn-inc"); const champs = document.querySelectorAll(".champ-inc"); btns.forEach((btn, ind) => { btn.addEventListener("click", () => { champs[ind].firstChild.nodeValue++; }); }); </script> </body> </html>
... inutile donc d'affecter/créer une classe CSS pour chaque élément.

Le script, en fin de page :
Code:

1 2 3 4 5 6 7 const btns = document.querySelectorAll(".btn-inc"); const champs = document.querySelectorAll(".champ-inc"); btns.forEach((btn, ind) => { btn.addEventListener("click", () => { champs[ind].firstChild.nodeValue++; }); });
... ce charge de faire le travail.

Nota :
On n'utilise pas des balises <th> pour mettre du style au contenu le CSS est là pour cela.

Tu pourrais également te passer des éléments <p> qui n'ont aucune plus value.

10/11/2023, 08h50
zool.bzh

Merci beaucoup NoSmoking tu me sauve la mise :D