document.createElement et le style

**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

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

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

document.createElement et le style

JavaScript

Discussions similaires

Partager

Partager