document.createElement et le style [Résolu]

humitake · 10/05/2011, 11h42

Bonjour,

J'ai un soucis avec mon document.createElement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function ajouterDetecteursDuPlan(){
    for(var i = 0; i < nbDetecteur; i++){
        var detecteur = document.createElement("img");
        detecteur.setAttribute("src", "Immage/rondVert.png");
        detecteur.setAttribute("id", detecteursDuPlan[i][0]);
        detecteur.setAttribute("title", detecteursDuPlan[i][1]);
        detecteur.setAttribute("onload", "dragDrop.initElement(this.id);");
        detecteur.setAttribute("style", "left:" + detecteursDuPlan[i][2] + " px; top:" + detecteursDuPlan[i][3] + " px;");
        document.getElementById("restePage").insertBefore(detecteur, document.getElementById("detecteurs"));
    }
}

Je récupère un tableau 2D qui contient des informations que je souhaite utiliser pour l'affichage d'un rondVert sur un plan.
Le code s’exécute correctement mais il ne me le place pas au coordonnée que je renseigne (top et left) et il n'active pas le drag&drop.

Ce qui est assez étrange c'est qu'avec fireBug quand je regarde le code de l'élément c'est que je vois bien les coordonnées que je lui est renseigné et quand je clic dessus le drag&drop s'active bien mais rien ne se passe.

Voici le code retourné par fireBug :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="7" src="Immage/rondVert.png" title="Mon Detecteur" onload="dragDrop.initElement(this.id);" style="left:300 px; top:300 px;">

Et le rendu de la page :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
    <head>
        <title>Fire Scan</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body onload="onload();">
        <script type="text/JavaScript" language="javascript" src="ihmJS.js"></script>
        <script type="text/JavaScript" language="javascript">
 
                function getDetecteursDuPlan(){
                    var xhr = getXhr();
                    xhr.open("GET", "getListeDetecteursPlan.php?idPlan=1", false);
                    xhr.send(null);
                    return JSON.parse(xhr.responseText);
                }
            function onload(){
                menuGaucheOnLoad();
                /*if(document.getElementById('plan').width >= document.getElementById('plan').height)
                    document.getElementById('plan').width = screen.width - 205;
                else
                    document.getElementById('plan').height = 960;*/
 
                //Gestion du scroll
                gestionScroll();
 
                setDetecteursDuPlan(getDetecteursDuPlan());
                getSizeOfDetecteursDuPlan();
                ajouterDetecteursDuPlan();
            }
        </script>
 
        <html>
    <head>
        <link rel="stylesheet" type="text/css" href="menuGaucheStyle.css">
        <script type="text/JavaScript" language="javascript" src="menuJS.js"></script>
        <script type="text/JavaScript" language="javascript" src="drag.js"></script>
        <script type="text/JavaScript" language="javascript" src="json_parse.js"></script>
        <script type="text/JavaScript" language="javascript">
        </script>
 
    </head>
    <body>
        <form name = "f1" action = "ihm.php">
            <div class="menuGauche">
                <table>
                    <tr><td><input type="button" value="Retour" id="retour" onclick="javascript:history.go(-1)"></td></tr>
                </table>
                <div id="log">
                    <table>
 
                        <tr><td>Loggin : <input type="textarea" name="log"></td></tr>
                        <tr><td>Password : <input type="password" name="pwd"></td></tr>
                        <tr><td><input type="button" value="Connexion" onclick="verifUser();"></td></tr>
                    </table>
                </div>
                <div id="connecter">
                    <table>
                        <tr><td><input type="button" value="Deconnexion" onclick="deconnexion();"></td></tr>
 
                    </table>
                </div>
                <table><tr><td><input type="button" value="Voir un plan" name="plan" onClick="newPopUp('http://127.0.0.1:8888/plan.php', 'coucou')"></td></tr></table>
                <div id="listeDetecteur">
                    <table>
 
        <tr><td><img id='0001' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 1'  />Detecteur 1</td></tr>
<tr><td><img id='0002' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 2'  />Detecteur 2</td></tr>
<tr><td><img id='0003' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 3'  />Detecteur 3</td></tr>
 
<tr><td><img id='0004' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 4'  />Detecteur 4</td></tr>
<tr><td><img id='0005' src='Immage/rondVert.png' onload='dragDrop.initElement(this.id);' style='position: absolute; z-index: 10;' title='Detecteur 5'  />Detecteur 5</td></tr>
 
                    </table>
                </div>
            </div>
        </form>
    </body>
</html>
            <div id='restePage'>
 
                <img id='plan' src ='Immage/Mezzanine.png' alt='erreur' onload='dragDrop.initElement(this.id);'/>
                <div id = 'detecteurs'>
                </div>
            </div>    </body>
</html>

Si quelqu'un peut me dire pourquoi cela ne marche pas ou me donner un autre moyen de faire ... Merci d'avance

Bovino · 10/05/2011, 11h48

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function onload()

EDIT : Mais tu as combien de balises <html>, <head> et <body> dans ta page ???

Loceka · 10/05/2011, 11h48

Pour modifier le style en javascript il ne faut pas passer par l'attribut HTML mais par l'attribut javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
detecteur.style.left = detecteursDuPlan[i][2] + " px";
detecteur.style.top = detecteursDuPlan[i][3] + " px";

SpaceFrog · 10/05/2011, 11h49

je propose

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

init()

humitake · 10/05/2011, 11h56

Citation:

Envoyé par Bovino

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function onload()

EDIT : Mais tu as combien de balises <html>, <head> et <body> dans ta page ???

Ahem ...Deux, en fait j'ai une page php qui génère le menu et il est incorporé dans l'autre page j'avais mis les balises pour pouvoir le tester séparément mais j'ai oublier de les retirer

Citation:

Envoyé par Loceka

Pour modifier le style en javascript il ne faut pas passer par l'attribut HTML mais par l'attribut javascript :

Je vien d'essayer de modifier mais sa ne change rien et firebug me renvoie :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="7" src="Immage/rondVert.png" title="Mon Detecteur" onload="dragDrop.initElement(this.id);" style="">

Et j'ai modifier mon onload() par init()

edit: Chose impressionnante, quand je bouge mon point je voit bien les coordonnées changer dans firebug mais le point sur la page lui ne bouge pas

Bovino · 10/05/2011, 11h59

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

detecteur.style.position = 'absolute'

Loceka · 10/05/2011, 12h00

Ben oui, ça ne modifie pas l'attribut HTML, c'est pas le but. Mais ça modifie réellement le style associé à l'élément. Si tu es fan de firebug, le style de l'élément apparaît dans la colonne de droite quand tu cliques sur l'élément en question.

humitake · 10/05/2011, 12h03

Ah bas oui évidement ...

Bon je vais me pendre merci a vous

10/05/2011, 11h48	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	Code : Sélectionner tout - Visualiser dans une fenêtre à part function onload() EDIT : Mais tu as combien de balises <html>, <head> et <body> dans ta page ??? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

10/05/2011, 11h49	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 094 Points : 45 094	je propose Code : Sélectionner tout - Visualiser dans une fenêtre à part init() __________________ Ma page 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 réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	10

10/05/2011, 11h59	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	Code : Sélectionner tout - Visualiser dans une fenêtre à part detecteur.style.position = 'absolute' __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

10/05/2011, 12h00	#7
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Ben oui, ça ne modifie pas l'attribut HTML, c'est pas le but. Mais ça modifie réellement le style associé à l'élément. Si tu es fan de firebug, le style de l'élément apparaît dans la colonne de droite quand tu cliques sur l'élément en question.
	00

10/05/2011, 12h03	#8
humitake Membre éclairé Olivier Étudiant Inscription : novembre 2010 Messages : 303 Détails du profil Informations personnelles : Nom : Olivier Âge : 20 Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : novembre 2010 Messages : 303 Points : 384 Points : 384	Ah bas oui évidement ... Bon je vais me pendre merci a vous
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email