Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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?

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

1 Answer

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

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