Javascript et DOM

Version imprimable

Javascript et DOM

Bonjour, j'essaie de dessiner un rectangle via JavaScript et DOM.
je crée un élément svg et un élément rect.
j'ai une erreur: TypeError: rect.setAttributeNS is not a function
Et je ne vois pas pourquoi.

Quelqu'un de plus aguerri arrivera peut-être à me mettre sur la voie.

mon

Code:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>TD 2-5-2</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body id="svgContainer">
 
</body onload="createSvg()">
</html>

mon JS

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
"use strict";
 
//constructeur d'un objet Rectangle
function Rectangle(x,y,largeur,hauteur) {
    this.x = x;
    this.y = y;
    this.largeur = largeur;
    this.hauteur = hauteur;
    this.aire = function() {return this.largeur * this.hauteur};
    this.dessineSVG = function(elmt) {
        var rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        elmt.appendChild(rectangle);
        //dessineRectangle(rectangle);
        return elmt;
    };
};
 
//génère un rectangle
function dessineRectangle(rect) {
    rect.setAttributeNS(null, "x", rect.x);
    rect.setAttributeNS(null, "y", rect.y);
    rect.setAttributeNS(null, "width", rect.largeur);
    rect.setAttributeNS(null, "height", rect.hauteur);
    rect.setAttributeNS(null, "stroke", "black");
    rect.setAttributeNS(null, "fill", "none");
}
 
//génère des element svg et rectangle et leur taille
window.onload = function createSvg() {
    var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg1.setAttribute("width", "500");
    svg1.setAttribute("height", "500");
    var rectangle = new Rectangle(30, 20, 100, 40);
    svg1 = rectangle.dessineSVG(svg1);
    document.getElementById("svgContainer").appendChild(svg1);
    dessineRectangle(rectangle);
}

L'erreur: TypeError: rect.setAttributeNS is not a function est à la ligne 20 dans mon JS.

à savoir, ma fonction dessineRectangle() fonctionnait en lui passant un element svg et un tableau avec les valeurs du rectangle en paramètre.
Et mon constructeur Rectangle(x,y,largeur,hauteur) fonctionnait dans un exercice précédent, j'ai juste ajouté la méthode this.dessineSVG.

27/09/2019, 13h43
Invité
Bonjour,
Code:

1 2 //constructeur d'un objet Rectangle function Rectangle(x,y,largeur,hauteur) {
Tu dis vouloir construire un objet (via une Classe), or tu définis une fonction.
- Voir : Classes JS

Bonjour,

Citation:

Envoyé par jreaux62

... or tu définis une fonction.

Toute fonction est objet et cette façon de faire, même si « pas très visuelle » est correcte.

Le problème vient de l'utilisation de ton objet rectangle qui ne définit pas d’élément SVG qui lui possède la méthode setAttributeNS.

Tu pourrais définir ton objet comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //constructeur d'un objet Rectangle function Rectangle(x,y,largeur,hauteur) { this.x = x; this.y = y; this.largeur = largeur; this.hauteur = hauteur; this.svgElement = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this.aire = function() {return this.largeur * this.hauteur}; this.dessineSVG = function(elmt) { //--var rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect"); elmt.appendChild(this.domElement); //dessineRectangle(rectangle); return elmt; }; };
et bien sur dans ta fonction dessineRectangle il te faut pointer sur l'élément SVG de ton Rectangle.
Code:

1 2 3 4 5 6 7 8 9 10 //génère un rectangle function dessineRectangle(rect) { const svgRect = rect.svgElement; svgRect.setAttributeNS(null, "x", rect.x); svgRect.setAttributeNS(null, "y", rect.y); svgRect.setAttributeNS(null, "width", rect.largeur); svgRect.setAttributeNS(null, "height", rect.hauteur); svgRect.setAttributeNS(null, "stroke", "black"); svgRect.setAttributeNS(null, "fill", "none"); }
Bon il n'empêche autant prendre l'habitude d'écrire en « JavaScript Moderne », en passant par les Classes même si il n'y a que la syntaxe qui change fondamentalement.

Au passage, c'est quoi ça ??

Citation:

</body onload="createSvg()">

29/09/2019, 19h34
Cisman

Nickel, ça fonctionne, merci.

Code:

</body onload="createSvg()">

c'est pour exécuter ma fonction createSvg dans le code JS, lorsque toute la page html est chargée.
30/09/2019, 11h06
NoSmoking

Citation:

c'est pour exécuter ma fonction createSvg dans le code JS, lorsque toute la page html est chargée.

Non c'est cette instruction window.onload = function createSvg() {...} qui fait que la fonction createSvg est appelée au chargement de ta page.
Mettre une action sur la balise de fermeture ne sert strictement à rien.

Tu pourrais avantageusement regarder du côté de addEventListener.