input dans un div

**totoche** · 12/11/2009, 15h28

Bonjour,
j'essaye de cr�er un DIV avec un input, le DIV et l'input sont associ�s par une feuille de style, la creation se fait par javascript.
Mais l'action sur le bouton ne produit rien

css

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
 
div#identification {
	width:300px;
	height:300px;
	background-color:#FFCC00;
	}
 
 
div#identification.input.nomTextBox{	
		font-size:10px;
		margin:0px;
		padding:0px;
		height:12px;
	}
 
div#identification.input.prenomTextBox{	
		position:relative;
		top:20px
		font-size:10px;
		margin:0px;
		padding:0px;
		height:12px;
	}

html + js

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
 
<html>
<head>
<script language="javascript">
function createMasque()
		{
			var myDiv = document.createElement('DIV');
			myDiv.className = 'identification';
 
			var textBox = document.createElement('INPUT');
			textBox.className = 'nomTextBox';
			textBox.id = 'textBoxNom' 
			textBox.value = "test";
		}
</script>
<link rel="stylesheet" href="f.css" type="text/css"></link>
</head>
<body>
<input type='button' onclick='createMasque();'>
</body>
</html>

Merci de votre aide

**vermine** · 12/11/2009, 15h32

Bonjour,

Cr�er les �l�ments, c'est bien. Maintenant, il faut les attacher � leur parent.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
myDiv.appendChild(textBox);

**totoche** · 12/11/2009, 15h41

merci,
j'ai tjs rien qui s'affiche

**vermine** · 12/11/2009, 15h43

H� bien oui, j'ai dis qu'il faut "les" rattacher � "leur" parent. J'ai trouv� le parent de "textBox" mais qui est le parent de "myDiv" ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<body>
<form id="monForm">
<input type='button' onclick='createMasque();'>
</form>
</body>
 
<script>
//La fonction blabla bla
   ...
   myDiv.appendChild(textBox);
   monForm.appendChild(myDiv);
   ...
</script>

**totoche** · 12/11/2009, 15h52

merci, �a fonctionne en partie l'input s'affiche

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
...
document.getElementById('tst').appendChild(myDiv);
..
		}
</script>
<link rel="stylesheet" href="f.css" type="text/css"></link>
</head>
<body id="tst">
...

, mais les propri�t�s de la feuillle de style ne sont pas prises en compte...

**vermine** · 12/11/2009, 15h56

Ouf l� niveau CSS je ne m'y connais pas trop.
A la place de .className, c'est peut-�tre .class ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
myDiv.class = 'identification';
textBox.class = 'nomTextBox';

**SpaceFrog** · 12/11/2009, 15h59

non c'est bein className

jette un oeil dans les contributions il y a un petit script de creation dynamique d'objets ...

**Bovino** · 12/11/2009, 16h16

Oui, c'est bien className, en revanche, tes d�clarations de styles sont � revoir :

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
div#identification {
}
 
div#identification.input.nomTextBox{
}
 
div#identification.input.prenomTextBox{
}

A titre d'exemple, avec une notation : div#identification.input.prenomTextBox tu affectes un style � une div qui a :

Pour id identification (le '#')
Un classe input (le ".input")
Et une classe prenomTextBox (".prenomTextBox")

Au cune div de ta page ne poss�de toutes ces propri�t�s. La bonne syntaxe serait :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

div.identification input.prenomTextBox

L� tu cherches bien dans la div dont la classe est identification les input dont la classe est prenomTextBox

input dans un div

JavaScript

Discussions similaires

Partager

Partager