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 trialTobias Graefe
11,934 PointsSpace.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?
1 Answer
KRIS NIKOLAISEN
54,971 PointsThe 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
11,934 PointsThank you very much! I should be more focused some time ;-)
KRIS NIKOLAISEN
54,971 PointsKRIS NIKOLAISEN
54,971 PointsCan you provide a link to the video with the teacher's notes?