Создание узла элемента, установка его атрибутов и добавление элемента?

Меня просят создать узел элемента для элемента ссылки и установить для его атрибута rel значение «styleSheet», для его атрибута id значение «fancySheet», а для его href в «na_style_num.css» (где num — это значение переменной styleNum).

Затем он хочет, чтобы я добавил элемент стиля fancySheet в заголовок документа.

Мне кажется, что я действительно близко или очень далеко отсюда. Вот что я пытался без везения:

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);
}

Я получил несколько ошибок, но проблема в том, что они написаны в форме, которую я не могу понять. Например:

» Трассировка (последний последний вызов): файл «nt-test-3ed2ebdf.py», строка 14, в assert(link.get_attribute('id') == 'fancySheet'), 'Атрибут id должен быть задано значение "fancySheet". Фактически: "' + str(link.get_attribute('id')) + '"' AssertionError: для атрибута id должно быть установлено значение "fancySheet". Фактически: "" "


javascript html appendchild createelement
person jaydajayda    schedule 09.06.2019    source источник
comment
пропущены кавычки вокруг .css в этой строке styleNum.setAttribute("href", "na_style_" + styleNum + .css);   -  person Zohir Salak    schedule 09.06.2019

Ответы (3)


arrow_upward
1
arrow_downward

Вы использовали одно и то же имя для двух переменных. Поскольку они объявлены с помощью var, это не приведет к ошибке. Второй перезапишет первый.

Просто измените имя одной из переменных

Также заверните .css в ""

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);
}
person Maheer Ali    schedule 09.06.2019
comment
Пожалуйста, перестаньте оставлять комментарии о минусах. Эти комментарии просто шум. Если бы человек, который проголосовал против, хотел предоставить более подробное объяснение, он бы это сделал. Они решили не делать этого, что совершенно нормально. Они никогда не увидят ваши комментарии. - person Cody Gray; 10.06.2019

arrow_upward
1
arrow_downward

В строке styleNum.setAttribute("href", "na_style_" + styleNum + .css); заключите .css в кавычки, потому что это строка, а не имя переменной.

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);
}
person random    schedule 09.06.2019

arrow_upward
0
arrow_downward

Случайно сгенерированное число должно храниться в переменной отдельно от узла элемента. Поскольку вы используете styleNum в качестве имени обеих переменных, сначала будет сгенерировано случайное число и сохранено в styleNum, затем будет создан новый узел элемента, а справа — случайно сгенерированное число, которое теперь потеряно навсегда, поскольку переменные не могут храниться. два разных значения. Чтобы избежать этого и сохранить случайное число для последующего использования в функции, вы должны назвать создаваемый элементный узел каким-либо другим именем, кроме styleNum.

Вот пример кода, который избегает этого:

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);
}

Обратите также внимание, как я добавил " " вокруг .css и изменил styleNum на styleElementNode в аргументе функции в последней строке. Это связано с тем, что функция предназначена для добавления созданного узла элемента, а не случайно сгенерированного числа, к заголовку документа.

person John Srtunk    schedule 05.03.2020