Discussion :

[ia.jenny]

Bonjour,
J'essaye de réaliser un bouton avec une concave.
la function createButtonOnCanvas(), affiche bien le bouton, mais createButtonOnCanvas.onClick ne fonctionne pas.
Merci Beaucoup

Code :

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
 
window.onload = function()
{
	const canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
 
	canvas.width =  200;
	canvas.height = 200;	
	createButtonOnCanvas.onClick = function() {alert("OnClick");}
}
function createButtonOnCanvas()
{
	var x=10;
	var y=10;
	var btn = document.createElement("button");
	document.body.appendChild(btn);
	btn.style.position = "absolute";
	btn.style.left = x + "px";
	btn.style.top = y + "px";
	btn.innerHTML = "btn";
	return btn;
}

[CosmoKnacki]

Tout d'abord, pour être en mesure de débugger un script par toi-même, tu dois t'en remettre à la Sainte Trinité:

• La console de ton navigateur (F12 avec Firefox).
• console.log(trucbidulle) pour afficher les divers éléments dans la dite console.
• Le site Mozilla Developper Network

C'est le minimum syndical.

Code :

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

createButtonOnCanvas.onClick = function() {alert("OnClick");}

Ici, tu ne définis pas un gestionnaire d'évènement onClick sur un élément bouton créé par la fonction createButtonOnCanvas, mais tu ajoutes une méthode onClick à la fonction createButtonOnCanvas (en Javascript les fonctions sont des objets comme pratiquement tout le reste d'ailleurs, on peut donc leur ajouter autant de méthodes et propriétés que l'on veut).

En écrivant ça, la fonction n'est bien sûr pas exécutée puisqu'il n'y a aucune raison qu'elle le soit.

Pour que cette fonction s'exécute, tu dois écrire: createButtonOnCanvas() (avec des parenthèses pour envoyer d'éventuels paramètres, même s'il n'y en a pas dans ce cas là).

Deuxième problème, si le gestionnaire d'évènement onClick existe bien, le nom de la propriété qui le gère est onclick (tout en minuscule).

Munie de ces informations, je te laisse le soin de réécrire cette ligne afin que le miracle s'accomplisse.

[ia.jenny]

merci pour le miracle