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 :

[DOM] createNode et affectation de proprietés


Sujet :

JavaScript

  1. #1
    Membre extrêmement actif Avatar de mapmip
    Profil pro
    ulla
    Inscrit en
    Juillet 2006
    Messages
    1 326
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : ulla

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 326
    Par défaut [DOM] createNode et affectation de proprietés
    bonjour,



    voila je veux savoir comment on fait pour qu'au moment de la creation d'un noeud dans le DOM par le biais de la méthode createNode, peut on affecter des attributs à ce nouveau noeud créee ?


    par exemple creation d'un DIV et on affecter un onclick ou un class



    mzerci d'avance

  2. #2
    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 659
    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 659
    Billets dans le blog
    1
    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 !

  3. #3
    Membre extrêmement actif Avatar de mapmip
    Profil pro
    ulla
    Inscrit en
    Juillet 2006
    Messages
    1 326
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : ulla

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 326
    Par défaut
    space frog, merci pour ton tutorial mais il est un peu compliqué pour moi, je ne suis pas un specialiste de javascript


    n'y a t il pas plus simple

  4. #4
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    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
    <html>
    <head>
    <script type="text/javascript">
    function foo(){
    var mydiv=document.createElement('div');
    with (mydiv){ 
     style.height="100px";
     style.width="300px";
     style.backgroundColor='#ff0000';
     style.color='white';
     style.fontSize="40px";
     innerHTML="c'est plus simple comme ça ?";
    }
    document.body.appendChild(mydiv);
    }
    </script>
    </head>
    <body onload="foo()">
    </body>
    </html>
    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 !

  5. #5
    Membre chevronné
    Avatar de FMaz
    Inscrit en
    Mars 2005
    Messages
    643
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 643
    Par défaut
    Bonjour, je sais que ce sujet est vieux, mais j'ai un petit souci que je crois assez connexe pour éviter de démarrer un autre sujet... Et puis comme icadedt n'a même pas pris la peine de dire un petit merci, j'en profite pour le faire car je ne connaissait même pas le with

    J'essaie d'ajouter un évènement onclick avec cette méthode mais je n'y arrive pas


    Voici la partie de mon code qui pose problème:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    //Créer le lien de suppression
    var span=document.createElement('span');
    with (span)
    {
    	className="fakelink";
    	style.fontSize="10px";
    	innerHTML = "(Supprimer)";
    	onclick = "remLieu(" + id + ");";
    }
     
    //Joindre les deux éléments
    elem.appendChild(span);
    Le code que j'aimerais généré serait celui-ci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <span class="fakelink" style="font-size:10px;" onclick="remLieu(345)">(Supprimer)</span>
    J'ai essayé plusieurs variantes (edit: dans le block with):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    onclick = function()
    {
    	remLieu(id);
    };
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    onclick = function(id)
    {	
    	remLieu(id);
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    onclick = function(id)
    {	
    	return function(){
    		remLieu(id);
    	}
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    addEventListener('click', remLieu(id), false);

    Mais je n'arrive à rien

  6. #6
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onclick = function(id){remLieu(id);};
    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 !

  7. #7
    Membre chevronné
    Avatar de FMaz
    Inscrit en
    Mars 2005
    Messages
    643
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 643
    Par défaut
    Hum
    ...

    Problème #1:
    en fait ca me passe [object mouseEvent]..


    J'essaie donc avec la solution non-recommandée: Function("...");


    Problème #2 ( résolu ):

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    remLieu = function(id)
    {
     alert(id);
    }
     
    var id = 10;
    with (span)
    {
        // ... 
        onclick=Function("remLieu(" + id + ")");
    }
    Résultat: undefined

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    remLieu = function(id)
    {
     alert(id);
    }
     
    var id = 10;
    with (span)
    {
        // ... 
    }
    span.onclick = Function("remLieu("+id+")");
    Résultat: 10

    Je crois que le with() possède son propre scope. Les variables ne semble pas être accessible.

  8. #8
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    tu es dasn une boucle pour l'id ??

    que fait la fonction remLieu

    function pas Function
    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 !

  9. #9
    Membre chevronné
    Avatar de FMaz
    Inscrit en
    Mars 2005
    Messages
    643
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 643
    Par défaut
    Voici les 2 fonctions intégrales:

    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
     
    	//Ajouter un lieu au tableau des lieux
    	addLieu = function (id, nom)
    	{
    		if(searchLieu(id)===false)
    		{
    			arrLieux.push(id);
     
    			//Créer le div
    			var elem=document.createElement('div');
    			with (elem)
    			{
    				id = "lieux_" + id; //Ne fonctionne pas, id est non accessible
    				style.display = "block";
    				innerHTML = nom + " ";
    			}
    			elem.id = "lieux_" + id; //Fonctionne bien
     
    			//Créer le lien de suppression
    			var span=document.createElement('span');
    			with (span)
    			{
    				className="fakelink";
    				style.fontSize="10px";
    				innerHTML = "(Supprimer)";
    			}
    			span.onclick = Function("remLieu("+id+")");
     
    			//Joindre les deux éléments
    			elem.appendChild(span);
    			$("listLieux").appendChild(elem);
    		}
    	}
     
    	//Supprimer un lieu
    	remLieu = function (id)
    	{
    		alert(id);
    		var i = searchLieu(id);
    		if(i !== false)
    		{
    			arrLieux = arrRemove(arrLieux, i);
    			$("listLieux").removeChild($("lieux_" + id));
    		}
    	}

    $("id") ... c'est parce que j'utilise prototype.

    Function au lieu de function: Oui, je comprend la différence, seulement avec onclick = function(id){remLieu(id);}; ca me retourne non pas l'id, mais l'event handler [object mouseEvent].

    Alors je me suis temporairement rabatu sur Function ... parce que ca semble fonctionner.

  10. #10
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut

    oui curieusement le with semble interférer avec la portée de la variable.
    Mais on peut le contourner comme ceci:
    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
     
    <script type='text/javascript'>
    function foo(bar){
    var newObj=document.createElement('div');
    with(newObj){
    innerHTML="cliquez ici";
    style.cursor="pointer";
    onclick=function(){zinc(this.message)}
    }
    newObj.message=bar
    document.body.appendChild(newObj)
    }
    zinc=function(msg){alert(msg)}
    </script>
     
    </head>
     
    <body onload="foo('coucou')">
     
    </body>
    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 !

  11. #11
    Membre chevronné
    Avatar de FMaz
    Inscrit en
    Mars 2005
    Messages
    643
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 643
    Par défaut
    Oui enfin, à mon sens, c'est drôlement compliqué pour absolument rien de plus comme façon de faire.

    Mais ma question de tantôt demeure toujours d'actualité:

    Comment faire pour passer un paramètre ( avec function, et pas Function ), sans toujours avoir le mouseEvent ... ?

  12. #12
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    Je veisn de tester ceci qui fonctionne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type='text/javascript'>
    function foo(bar){
    var newObj=document.createElement('div');
    with(newObj){
    innerHTML="cliquez ici";
    style.cursor="pointer";
    onclick=function(){zinc(bar)}
    }
     
    document.body.appendChild(newObj)
    }
    zinc=function(msg){alert(msg)}
    </script>
    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 !

  13. #13
    Membre chevronné
    Avatar de FMaz
    Inscrit en
    Mars 2005
    Messages
    643
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 643
    Par défaut
    Étrange étrange.

    J'ai remplacé:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    with (span)
    			{
    				className="fakelink";
    				style.fontSize="10px";
    				innerHTML = "(Supprimer)";
    			}
    			span.onclick = Function("remLieu("+id+")");
    Par ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    with (span)
    			{
    				className="fakelink";
    				style.fontSize="10px";
    				innerHTML = "(Supprimer)";
    				onclick = function(){ remLieu(id); }
    			}
    			//span.onclick = Function("remLieu("+id+")");

    Et mon code cesse simplement de fonctionner.

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

Discussions similaires

  1. Réponses: 11
    Dernier message: 19/03/2009, 09h33
  2. [XML][DOM] CreateNode() et Préfixes
    Par NiKKiLLeR dans le forum VB 6 et antérieur
    Réponses: 1
    Dernier message: 09/02/2007, 15h01
  3. [DOM] Affectation onClick
    Par NeHuS dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 07/03/2006, 13h24
  4. [MaskEditBox] Affecter avec un réel
    Par fikou dans le forum Général VBA
    Réponses: 6
    Dernier message: 16/09/2002, 09h28
  5. Réponses: 3
    Dernier message: 04/09/2002, 09h42

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