Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Tobias Graefe
Tobias Graefe
11,934 Points
Posted by Tobias Graefe
Tobias Graefe
11,934 Points

Space.js:16 Uncaught TypeError: svgSpace.setAttributeNS is not a function

Hi all!

If i click the start button I get this error: Space.js:16 Uncaught TypeError: svgSpace.setAttributeNS is not a function

It seems to be in the function "drawSVGSpace" I copied the code from the teachers note.

class Space { constructor(x, y) { this.x = x; this.y = y; this.id = space-${x}-${y}; this.token = null; this.diameter = 76; this.radius = this.diameter / 2; }

drawSVGSpace() {
    const svgSpace = document.createAttributeNS('http://www.w3.org/2000/svg', 'circle');
    svgSpace.setAttributeNS(null, 'id', this.id);
    svgSpace.setAttributeNS(null, 'cx', this.x * this.diameter + this.radius);
    svgSpace.setAttributeNS(null, 'cy', this.y * this.diameter + this.radius);
    svgSpace.setAttributeNS(null, 'r', this.radius - 8);
    svgSpace.setAttributeNS(null, 'fill', 'black');
    svgSpace.setAttributeNS(null, 'stroke', 'none');

    document.getElementById('mask').appendChild(svgSpace);
}

}

Why is the namespace null by the way? Can anyone please help me?

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Can you provide a link to the video with the teacher's notes?

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

The notes use createElementNS instead of createAttributeNS here:

const svgSpace = document.createElementNS("http://www.w3.org/2000/svg", "circle");

An explanation for the null namespace can be found here

The first argument for all the DOM2 namespace aware methods must be the namespace name (also known as the namespace URI) of the element or attribute in question. For SVG elements this is 'http://www.w3.org/2000/svg'. However, note carefully: the Namespaces in XML 1.1 recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, you must use null as the namespace name for unqualified (prefixless) attributes. So, to create an SVG rect element using document.createElementNS(), you must write:

document.createElementNS('http://www.w3.org/2000/svg', 'rect');

But to retrieve the value of the x attribute on an SVG rect element, you must write:

rect.getAttributeNS(null, 'x');
Tobias Graefe
Tobias Graefe
11,934 Points
Tobias Graefe
Tobias Graefe
11,934 Points

Thank you very much! I should be more focused some time ;-)