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