Affecter une fonction au click avec paramètre

**Eckmül** · 19/05/2021, 16h39

Bonjour,

Souvent quand je fais des fonctions pour éviter de me perdre, j'écris dans un programme test, cela me permet de ne pas me perdre dans le but premier de la fonction et de mieux comprendre comment elle marche. Du coup, là j'ai créer une fonction qui quand on clique dessus affiche le chiffre 5 à la div :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<p id="menu">MENU</p>
<style>
    #menu {
        cursor: pointer;
    }
</style>
<script>
    function afficheChiffre() {
        document.getElementById("menu").innerHTML += 5;
    }
    document.getElementById("menu").addEventListener("click", afficheChiffre);
</script>

ensuite, j'ai essayé de conditionné ça à une valeur rentrée comme ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<p id="menu">MENU</p>
<style>
    #menu {
        cursor: pointer;
    }
</style>
<script>
    function afficheChiffre(chiffre) {
        document.getElementById("menu").innerHTML += 5;
    }
    document.getElementById("menu").addEventListener("click", afficheChiffre(5));
</script>

Là le soucis c'est que ça me renvoie directement MENU5 avant même que j'ai cliqué et cela ne rajoute rien quand je clique.

**Lekno** · 20/05/2021, 16h08

Code js :

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

1
2
3
4
5
6
7
 
<script>
    function afficheChiffre(chiffre) {
        document.getElementById("menu").innerHTML = "MENU"+chiffre;
    }
    document.getElementById("menu").addEventListener("click", afficheChiffre(5));
</script>

**Eckmül** · 20/05/2021, 16h15

ça revient au même le MENU5 s'affiche avant que l'Event click soit effectuer et le click suivant ne change rien

**Lekno** · 20/05/2021, 16h48

Il vous faut utiliser le callback du addeventlistener

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
<!DOCTYPE html>
<html>
<body>
 
<div id="menu">
	<span id="submenu">MENU</span>
</div>
<style>
    #menu {
        cursor: pointer;
    }
</style>
<script>
        document.getElementById("menu").addEventListener("click", function() {
                afficheChiffre("5");
        });
        function afficheChiffre(chiffre) {
        document.getElementById("submenu").innerHTML = "MENU"+chiffre;
    }
</script>
 
</body>
</html>

**Eckmül** · 20/05/2021, 17h02

Ok,

Merci pour les infos, je ne connais pas le terme "callback" je vois pas à quoi ça fait référence. Si j'ai bien compris le problème venait surtout du fait que la fonction faisait référence à une div, ce qui ne lui plaisait pas c'est ça ?

**Lekno** · 20/05/2021, 17h03

non la fonction doit être appelé dans les accolades du addeventlistener regardez ma syntaxe et comparez la à la votre

Pour le callback : https://www.w3schools.com/js/js_callback.asp

**NoSmoking** · 20/05/2021, 17h54

Bonjour,

Envoyé par Eckmül

Si j'ai bien compris le problème venait surtout du fait que la fonction faisait référence à une div

• non, le fait d'écrire :

Code :

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

document.getElementById("menu").addEventListener("click", afficheChiffre(5));

affecte le résultat de la fonction à l'écouteur, cela n'aura donc aucun effet, dans ton cas l'écouteur vaudra undefined, valeur de retour par défaut des fonctions.

• le fait d'écrire :

Code :

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

document.getElementById("menu").addEventListener("click", afficheChiffre);

affecte la référence de la fonction devant être exécutée, dans ce cas cela fonctionnera mais tu ne passera pas de paramètre.

• le fait d'écrire :

Code :

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

1
2
3
document.getElementById("menu").addEventListener("click", function() {
    afficheChiffre("5");
});

affecte la référence de la fonction anonyme devant être exécutée, dans ce cas tu peux mettre dans le corps de celle-ci ce que tu veux.

A lire : Les fonctions

**Eckmül** · 21/05/2021, 10h16

Merci pour le détail NoSmoking

Affecter une fonction au click avec paramètre

JavaScript

Discussions similaires

Partager

Partager