Affichage de div générée par createElement() + AppendChild().
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:
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> |
