Intégration "OnClick" dans un bouton en JS

**glycerine** · 04/02/2013, 16h52

Bonjour,
Merci à tous pour ces supers forums.
Je débutte, en JS (et notamment en programmation non typé) et j'essaie de faire des tuto developpez.com.
J'essaie désespérément à partir du script JS de rajouter à une liste de bouton (stoqué dans un tableau). Mais voila, lorsque j’exécute mon scripte,et que je regarde dans les éléments de mon document, l'attribut "onclick" n'est pas cérée.

voici mon script:

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function maina()
{
 
 
	console.log("Script");
	//création des input de type Text
	elInput = new Array();
	elInput[0]=document.createElement("input");
	elInput[0].type="text";
	elInput[0].id="Input0";	
 
 
	elbutton =new Array;
	elbutton [0]=document.createElement("button");
	elbutton [0].id="Button0"
 
	//Tableau contenant les options de la liste
	 elForm=document.getElementById("formulaire");
	 objLigneDeFin=document.getElementById("ligneFin");
     elForm.insertBefore(elInput[0],objLigneDeFin);
	 elForm.insertBefore(elbutton[0],objLigneDeFin);
}
 
function add()
{
 
	console.log("add");
	var i=elInput.length;
	console.log(i);
	elInput[i]=document.createElement("input");
	elInput[i].type="text";
	elInput[i].id="Input"+i;
 
 
    elbutton[i]=document.createElement("button");
	elbutton[i].onclick=function(){alert("test");};
	elbutton[i].id="Button"+i;
 
 
 
	var objBr=document.createElement("Br");
	elForm.insertBefore(objBr,objLigneDeFin);
	elForm.insertBefore(elInput[i],objLigneDeFin);
	elForm.insertBefore(elbutton[i],objLigneDeFin);
 
 
}

le HTML (Qui a priori ne sert pas à grand chose pour ce problème):

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
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
		<title>Test 1: Developper.com</title>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
 
	<body onload="maina()">
		<div>
			<header onload="">
				<h1>Header</h1>
 
 
  					<form id="formulaire">
 
 			        <hr id="ligneFin"\>		
 					</form>
 
			<button id="bouton1" onclick="add()">ADD</button>
 
			</header>
			<nav>
			<h1>Menu</h1>
			</nav>
 
			<div >
			</div>
 
			<footer>
			<h1>Footer</h1>
 
 
			</footer>
		</div>
	</body>
</html>

auriez vous des idées sur ce problème?
Merci d'avance de toute votre aide,

**SpaceFrog** · 04/02/2013, 16h58

tu veux dire dans le code source ?

**glycerine** · 04/02/2013, 17h08

Merci pour ta réponse, oui, j'aimerai intégrer l'event OnClick directement dans le code source (pour moi JS).

**SpaceFrog** · 04/02/2013, 17h17

tu ne le verras pas dans le code source ...
cela n'empêchera pas le code d'être actif ...

avec un navigateur comme firefox et la webdevtoolbar tu peux visualiser le code source généré pas javascript

**glycerine** · 04/02/2013, 17h55

Merci pour ta réponse,
J'avais pas compris le code source. Oui je ne regarde pas dans le code source mais dans l'onglet élément de Chrome. J'ai bien l'attibut ID qui est rajouté pour le l’élément bouton mais pas l'attribut OnClick.
Ce qui est bizare, c'est qu quand je clique sur le bouton, j'ai l'impression que la page se rafraichis (car la page se remet à 0)

**Bovino** · 05/02/2013, 08h46

mais pas l'attribut OnClick

C'est normal : dans ton code, tu ne définis pas un attribut HTML onclick mais une propriété JavaScript liée à l'objet HTMLElement correspondant.

j'ai l'impression que la page se rafraichis

Là encore, tout à fait normal : par défaut, une balise <button> est de type submit.

**NoSmoking** · 05/02/2013, 19h16

Bonjour,

Envoyé par Bovino

Là encore, tout à fait normal : par défaut, une balise <button> est de type submit.

oui mais n'a d'effet que lorsque celui ci est dans une FORM ce qui ne semble pas être le cas ici.

**Bovino** · 06/02/2013, 07h50

Code html :

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

<form id="formulaire">

Bah... si en fait...

**NoSmoking** · 06/02/2013, 19h10

Envoyé par Bovino

Bah... si en fait...

Code html :

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

1
2
3
4
<form id="formulaire">
  <hr id="ligneFin"\>		
</form>
<button id="bouton1" onclick="add()">ADD</button>

le button est à l'extérieur sauf si bien sûr il s'agit d'un code très épuré!

**Bovino** · 07/02/2013, 08h07

Oui, mais les boutons ajoutés sont insérés dans le formulaire...

**NoSmoking** · 07/02/2013, 22h05

ARF!!! je n'ai pas regardé le code

**sekaijin** · 08/02/2013, 12h02

j'ai essayé ton code mis à part quelques petit pb de conception il fonctionne normalement.
dans la fonction maina tu écrit un code est est le même que celui de la fonction add mais pour l'indice 0 il suffit d'appeler add pour avoir le même résultat donc inutile de coder deux fois la même chose.

ton pb de click vient de deux chose dans ma fonction maina tu créé un bouton qui ne fait rien donc par défaut il poste le formulaire
dans la methode add tu mets bien une fonction sur le onclick (et elle fonctionne j'ai testé) mais elle ne retourne pas de valeur sur le onclick pas de valeur c'est équivalent à true donc le formulaire et là encore poster.

voici ton code révisé en supprimant les lignes inutiles dans maina et en ajoutant le return false dans add

Code javascript :

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
32
33
34
35
36
37
38
39
40
41
42
43
function maina()
{
  //on initialise les variables
  console.log("Script");
  //création des input de type Text
  elInput = new Array();
  elbutton =new Array;
 
  //Tableau contenant les options de la liste
  elForm=document.getElementById("formulaire");
  objLigneDeFin=document.getElementById("ligneFin");
 
  //on appelle add pour créer le premier input
  add();
}
function add()
{
  console.log("add");
  var i=elInput.length;
  console.log(i);
 
  elInput[i]=document.createElement("input");
  elInput[i].type="text";
  elInput[i].id="Input"+i;
 
  elbutton[i]=document.createElement("button");
  //pour la démo l'attribut onclick qui ne sert à rien
  elbutton[i].setAttribute('onclick', "n'importe quoi");
  // la fonction onclick qui fais le boulot
  elbutton[i].onclick=function(){
    alert(elInput[i].id + " = " + elInput[i].value) //j'ai remplacé "test" par la valeur de l'input associé
    return false
  };
  elbutton[i].id="Button"+i;
  // ajout d'un texte sur le bouton
  var text = document.createTextNode("Button "+i);
  elbutton[i].appendChild(text)
 
  var objBr=document.createElement("Br");
  elForm.insertBefore(objBr,objLigneDeFin);
  elForm.insertBefore(elInput[i],objLigneDeFin);
  elForm.insertBefore(elbutton[i],objLigneDeFin);
}

donc dans ton code tout fonctionne normalement.
dans chrome tu inspecte l'élément et tu mets un point d'arrêt javascript sur la ligne alert(....)
tu clique sur ton bouton et dans l'inspection des variable tu parcours les propriétés de ton bouton (variable this)
tu vas trouver onclick et tu va voir que ta méthode est bien définie.
par contre si tu fais this.getAttribute("onclick") la valeur est nulle.

C'est une confusion qu'on fait à mon avis bien trop souvent. dans la préhistoire du HTML on écrivait onClick pour fixer l'attribut dans le code html mais on écrivait onclick lorsqu'on manipulait le handler en javascript.
je trouvais que cela était très pertinent car en effet il y a bien un attribut et un membre de l'élément qui tous deux s'appelle onclick.

lorsque en HTML on écrit<button id="bouton1" onclick="add()">ADD</button> on fixe l'attribut onclick qui est un simple texte. lorsque le moteur de rendu HTML va interpréter ce code source il va bien fixer l'attribut onclick avec la valeur add() qui est un texte. puis il va créer une fonction qu'il va affecter au membre

Code javascript :

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

1
2
3
onclick=function(evt) {
  add();
}

l'attribut ne sert à rien d'autre qu'à généré cette méthode seul le membre est actif.

d'ailleurs si tu mets un simple texte dans l'attribut onclick (pas un source js) le moteur HTML va fixer l'attribut mais pas le membre.

si tu exécute mon code tu verra que l'attribut onclick des boutons contient n'importe quoi.

enfin le return false est à ne pas oublier sur les onclick et autre gestionnaire d’évènements

A+JYT

Intégration "OnClick" dans un bouton en JS

JavaScript

Discussions similaires

Partager

Partager