Добавление элемента к определенному идентификатору, циклам for и анонимным функциям?

Я создал узел элемента с именем figBox для элемента figure, установив для его атрибута id значение "styleThumbs" и попытку, чтобы добавить его к элементу div с идентификатором «box».

Затем мне нужно было заполнить поле рисунка, вставив цикл for с индексом от 0 до 4. В этом цикле я хотел создать узел элемента img с именем «sheetImg» с атрибутом src «na_small_num.png» и значение атрибута alt «na_style_num.css» (где num — это значение индекса в цикле for).

Наконец, мне нужно было, чтобы браузер загружал другую таблицу стилей, когда пользователь щелкает одно из миниатюр, добавляя обработчик событий в «sheetImg», который запускает анонимную функцию, изменяющую атрибут href элемента ссылки. с идентификатором «fancySheet» на значение атрибута alt цели события.

Вот что я уже пробовал:

var figure = document.createElement("figBox");
            figure.setAttribute("id", "styleThumbs");
            document.getElementById("box").appendChild(figure);

   for (var i = 0; i = 3; i++) {
   var img = document.createElement("sheetImg");
             img.setAttribute("src", "na_small_num.png");
             img.setAttribute("alt", "na_style_" + [i] + ".css");

sheetImg.onclick = styleElm.seAttribute("href", "alt");
sheetImg.appendChild(figure);

Программа, проверяющая мой код, возвращает это как неверное, что неудивительно, учитывая, что я совершенно неопытен. Где я ошибаюсь?

ИЗМЕНИТЬ

Всем спасибо за помощь. Здесь я разобрался со множеством проблем. Вот правильный код:

var figBox = document.createElement("figure");
             figBox.setAttribute("id", "styleThumbs");
             document.getElementById("box").appendChild(figBox);

for (var i = 0; i < 5; i++) {
   var sheetImg = document.createElement("img");
                  sheetImg.setAttribute("src", "na_small_" + i + ".png");
                  sheetImg.setAttribute("alt", "na_style_" + i + ".css");
                  sheetImg.onclick = function(e) {
                     document.getElementById("fancySheet").href = e.target.alt;
                  }
                  figBox.appendChild(sheetImg);
}

var thumbStyles = document.createElement("style");
document.head.appendChild(thumbStyles);

javascript html append appendchild
person jaydajayda    schedule 09.06.2019    source источник
comment
for (var i = 0; i = 3; i++) меньше 3 должно быть вашим условием, в настоящее время вы назначаете 3 для i   -  person GrafiCode    schedule 09.06.2019

Ответы (2)


arrow_upward
1
arrow_downward

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="na_style_8.css">
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

JavaScript

<script type="text/javascript">
    var figure = document.createElement('figBox'),
        loadStylesheet = (stylesheet) => {
            stylesheetElement.setAttribute('href', stylesheet + '?' + new Date().getTime());
        },
        stylesheetElement = document.querySelector('link[href="na_style.css"]');

    figure.setAttribute('id', 'styleThumbs');
    document.getElementById('box').appendChild(figure);

    for (var i = 0; i < 4; i++) {
        var sheetImage = document.createElement('sheetImage');
        sheetImage.setAttribute('src', 'na_small_num.png');
        sheetImage.setAttribute('alt', 'na_style_' + [i] + '.css');

        // Populate figBox with created sheetImage
        figure.appendChild(sheetImage);

        // Add click event listener to sheetImg element
        sheetImage.addEventListener('click', (event) => {
            // Load stylesheet with anonymous function
            loadStylesheet(event.target.getAttribute('alt'));
        });
    }
</script>
person Community    schedule 09.06.2019

arrow_upward
0
arrow_downward

Согласно вашему описанию, я понял несколько вещей, проверьте приведенный ниже код и дайте мне знать, если что-то не так.

var box = document.createElement('div');
    var link = document.createElement('link');
    link.setAttribute("href", "defaultStyle.css");
    document.body.appendChild(box);
    document.head.appendChild(link);
    var figBox = document.createElement('figBox');
    figBox.setAttribute("id", "styleThumbs");
    box.appendChild(figBox);

    var linkTag = document.createElement('div');
    document.body.appendChild(linkTag);
    
    for (var i = 0; i <= 3; i++) {
        var img = document.createElement("img");
        img.setAttribute("src", "na_small_" + i + ".png");
        img.setAttribute("name", "sheetImg");
        img.setAttribute("alt", "na_style_" + i + ".css");
        img.addEventListener('click', function(e) {
            link.setAttribute("href", e.srcElement.alt);
            linkTag.innerHTML = link.href;
        });
        figBox.appendChild(img);
    }
img {
cursor: pointer;
}
<html>

<head>
</head>

<body>
</body>

</html>

person Raghul Selvam    schedule 09.06.2019