IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

input dans un div


Sujet :

JavaScript

  1. #1
    Membre éprouvé Avatar de totoche
    Inscrit en
    Janvier 2004
    Messages
    1 090
    Détails du profil
    Informations forums :
    Inscription : Janvier 2004
    Messages : 1 090
    Par défaut input dans un div
    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

  2. #2
    Expert éminent

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Par défaut
    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);

  3. #3
    Membre éprouvé Avatar de totoche
    Inscrit en
    Janvier 2004
    Messages
    1 090
    Détails du profil
    Informations forums :
    Inscription : Janvier 2004
    Messages : 1 090
    Par défaut
    merci,
    j'ai tjs rien qui s'affiche

  4. #4
    Expert éminent

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Par défaut
    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>

  5. #5
    Membre éprouvé Avatar de totoche
    Inscrit en
    Janvier 2004
    Messages
    1 090
    Détails du profil
    Informations forums :
    Inscription : Janvier 2004
    Messages : 1 090
    Par défaut
    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...

  6. #6
    Expert éminent

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Par défaut
    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';

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    non c'est bein className

    jette un oeil dans les contributions il y a un petit script de creation dynamique d'objets ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Séléctionner un input inclus dans une div
    Par balishi dans le forum jQuery
    Réponses: 2
    Dernier message: 22/04/2013, 14h34
  2. Input qui ne reste pas dans une div
    Par miniBob dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/06/2010, 23h58
  3. Récupérer valeur chekbox et input dans un DIV
    Par axanta dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 12/11/2008, 15h51
  4. builder.node sur un input dans un div
    Par lodan dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 23/06/2007, 10h26
  5. balise input dans DIV
    Par lapartdombre dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 06/02/2006, 17h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo