Dupliquer des boutons d'incrémentation

**zool.bzh** · 08/11/2023, 11h02

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sylvain257** · 08/11/2023, 13h58

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+

**zool.bzh** · 08/11/2023, 14h08

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

voici le code qui fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 08/11/2023, 17h37

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**zool.bzh** · 10/11/2023, 08h50

Merci beaucoup NoSmoking tu me sauve la mise

Dupliquer des boutons d'incrémentation

JavaScript

Vue hybride

Discussions similaires

Partager

Partager