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