Affichage de div générée par createElement() + AppendChild().

**auloma** · 27/01/2021, 16h39

Bonjour à tous.

J'ai écrit un programme qui, lorsqu'un évènement se produit, génère une nouvelle div (createElement() puis appendChild() ). Il s'agit ici d'une div SVG.
Lorsque je l’exécute, l'évènement est reconnu. Après vérification dans l'inspecteur, la div est correctement générée et placée, mais elle n'est pas affichée à l'écran.
J'ai vérifié la validité des attributs de la div générée en la créant directement dans mon html, et elle s'affiche correctement.

Il s'agit d'une application client qui communique avec serveur node.js, l'évènement mentionné plus haut est tout simplement la réception d'un message en provenance du serveur.

J'ai vraiment besoin que cette div s'affiche dès qu'elle est générée, sinon mon programme n'a pas vraiment d'intérêt ^^.

Merci pour votre aide !

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
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Target</title>
    <link rel="stylesheet" href="client.css">
 
</head>
<html>
<body>
    <div class="pointsList"></div>
    <div class="score"></div>
    <svg xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="100%"
        height="10%"
        viewBox="0 0 684 648" id="target">
 
    </svg> 
 
    <script>
        var target = document.getElementById("target");
 
        var ws;
        function init() {
            if (ws) {
                ws.onerror = ws.onopen = ws.onclose = null;
                ws.close();
            }
 
            ws = new WebSocket('ws://localhost:1234');
            ws.onopen = () => {
                console.log('Connection established !');
            }
            
            ws.onmessage = function receive({data}) {
                console.log(JSON.parse(data).x);
                console.log(JSON.parse(data).y);
                
                
                var impact = document.createElement("circle");
                impact.setAttribute("fill","lime");
                impact.setAttribute("cx",(50+ 2*(JSON.parse(data).x)) + "%");
                impact.setAttribute("cy",(25+ 2*(JSON.parse(data).y)) + "%");
                impact.setAttribute("r","1.9%");
                impact.setAttribute("stroke","limegreen");
                impact.setAttribute("stroke-width","0.5");
                impact.setAttribute("class","impact");
 
                target.appendChild(impact);
            }
 
            ws.onclose = function() {
                ws = null;
            }
        }
        init();
    </script>
</body>
</html>

**ProgElecT** · 27/01/2021, 17h35

Salut

La balise <html> ne devrait elle pas être avant le <head> ?

**auloma** · 27/01/2021, 18h25

Effectivement, j'ai toujours cru que ça se faisait comme ça. Je sais pas d'où j'ai sorti ça ...

En revanche, cela ne résout pas mon souci ...

**melka one** · 27/01/2021, 18h48

jour

essai avec la syntaxe NS

Code :

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

1
2
3
var svgNS = "http://www.w3.org/2000/svg";
 
var impact = document.createElementNS(svgNS,"circle");

**auloma** · 27/01/2021, 19h06

Cela fonctionne ! Merci beaucoup !

Je vais me renseigner un peu plus sur cette syntaxe.

Affichage de div générée par createElement() + AppendChild().

JavaScript

Discussions similaires

Partager

Partager