Javascript et DOM

**Cisman** · 27/09/2019, 12h52

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 HTML :

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

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 :

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
"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.

Invité · 27/09/2019, 13h43

Bonjour,

Code :

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

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

**NoSmoking** · 27/09/2019, 17h15

Bonjour,

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 :

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

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 :

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

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

</body onload="createSvg()">

**Cisman** · 29/09/2019, 19h34

Nickel, ça fonctionne, merci.

Code HTML :

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

</body onload="createSvg()">

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

**NoSmoking** · 30/09/2019, 11h06

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.

Javascript et DOM

JavaScript

Discussions similaires

Partager

Partager