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

Affecter une fonction au click avec paramètre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager