Creating an element node, setting its attributes, and appending the element?

Question

I am being instructed to create an element node for the link element and set its rel attribute to "styleSheet", its id attribute to "fancySheet", and its href attribute to "na_style_num.css" (where num is the value of the styleNum variable).

It then wants me to append the fancySheet style element to the document head.

I feel as if I'm really close or really far off here. Here's what I've attempted without luck:

na_styler.js:

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleNum = document.createElement("link");
   styleNum.setAttribute("rel", "stylesheet");
   styleNum.setAttribute("id", "fancySheet");
   styleNum.setAttribute("href", "na_style_" + styleNum + .css);
   document.head.appendChild(styleNum);
}

I've been receiving a few errors but the problem is it's written in a form I can't really understand. For example:

" Traceback (most recent call last): File "nt-test-3ed2ebdf.py", line 14, in assert(link.get_attribute('id') == 'fancySheet'), 'The id attribute should be set to "fancySheet". Actual: "' + str(link.get_attribute('id')) + '"' AssertionError: The id attribute should be set to "fancySheet". Actual: "" "

missed quotes around .css in this line styleNum.setAttribute("href", "na_style_" + styleNum + .css); — user7148391
– user7148391, Commented Jun 9, 2019 at 16:10

Maheer Ali · Accepted Answer · 2019-06-09 16:08:07Z

2

You have used same name for two variables. As they are are declared with var so it will not throw error. The second one will overwrite the first.

Just change the name of one of the variable

Also wrap .css in ""

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleElm = document.createElement("link");
   styleElm.setAttribute("rel", "stylesheet");
   styleElm.setAttribute("id", "fancySheet");
   styleElm.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleElm);
}

answered Jun 9, 2019 at 16:08

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cody Gray Over a year ago

Please stop leaving comments about downvotes. These comments are just noise. If the person who downvoted had wanted to provide a more detailed explanation, they would have done so. They chose not to, which is completely fine. They're never going to see your comments.

random · Accepted Answer · 2019-06-09 16:11:59Z

1

In line styleNum.setAttribute("href", "na_style_" + styleNum + .css); enclose .css in quotes, because it's a string and not a variable name.

styleNum.setAttribute("href", "na_style_" + styleNum + '.css');

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleEle = document.createElement("link");
   styleEle.setAttribute("rel", "stylesheet");
   styleEle.setAttribute("id", "fancySheet");
   styleEle.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleNum);
}

edited Jun 9, 2019 at 16:11

answered Jun 9, 2019 at 16:06

random

7,9093 gold badges21 silver badges25 bronze badges

Comments

John Srtunk · Accepted Answer · 2020-03-05 03:42:52Z

The randomly generated number is meant to be stored in a variable separately from the element node. Since you use styleNum as the name of both variables, first a random number will be generated and stored in styleNum, then the new element node will be created and over right the randomly generated number, which is now lost forever since variables can't store two different values. To avoid this and keep the random number to use later in the function, you must name the element node being created anything other than styleNum

Here is an example of code which avoids this:

function setStyles() {
   var styleNum = randInt(5);
   var styleElementNode = document.createElement("link");
   styleElementNode.setAttribute("rel", "stylesheet");
   styleElementNode.setAttribute("id", "fancySheet");
   styleElementNode.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleElementNode);
}

Notice also how I added the " " around .css and changed styleNum to styleElementNode in the function argument on the last line. This is because the function is meant to append the created element node, not the randomly generated number, to the document head.

Collectives™ on Stack Overflow

Creating an element node, setting its attributes, and appending the element?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related