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)