Incrémenter dans une fonction avec addEventListener

**zool.bzh** · 06/11/2023, 09h58

bonjour a tous
j'aimerais incrémenter mon compteur a l'aide d'une fonction.
voici mon code :

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
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
	<body>
	<button class="guessSubmit" type="button">inc</button>
	<p class="nbr">0</p>
	<script>
let guessSubmit = document.querySelector(".guessSubmit");
let nbr = document.queryselector(".nbr");
function checkGuess() {
nbr++;
        }
        guessSubmit.addEventListener("click", checkGuess);      
        </script>
  </body>
 
</html>

Que dois mettre a la place de nbr++; pour que ça fonctionne.
Merci

**ASCIIDEFOND** · 06/11/2023, 10h36

Salut zool.bzh,

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
    <script>
        let guessSubmit = document.querySelector(".guessSubmit")
 
        function checkGuess(nbr) {
            nbr.innerText = parseInt(nbr.innerText) + 1
        }
 
        guessSubmit.addEventListener('click', () => {
            checkGuess(document.getElementsByClassName('nbr')[0])
        })
    </script>

**CosmoKnacki** · 06/11/2023, 11h25

Moi je ferais comme ça:

Code :

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

1
2
3
4
5
6
7
8
let guessSubmit = document.querySelector(".guessSubmit");
let nbrText = document.querySelector(".nbr").firstChild;
 
function checkGuess() {
    nbrText.nodeValue++;
}
 
guessSubmit.addEventListener("click", checkGuess);

Attention à la casse, c'est querySelector et pas queryselector.

L'idée est de viser le nœud texte qui est le premier nœud enfant de l'élément p.
Bien que la propriété nodeValue de ce nœud texte soit de type string, l'incrémentation (++) force la coercion en type number, puis la nouvelle valeur est de nouveau passée en string pour être réaffectée à la valeur du nœud texte, et tout ça de manière transparente. C'est beau la vie.

**zool.bzh** · 06/11/2023, 12h31

Merci ASCIIDEFOND
Merci CosmoKnacki
Vous êtes géniaux !!
j'opterais plus pour la solution de CosmoKnacki ++

zool

Incrémenter dans une fonction avec addEventListener

JavaScript

Discussions similaires

Partager

Partager