0

создаю автозаполняемое меню навигации по статье. оно работает только с элементами h2 и присваивает им id от 0 до конца. затем заполняет меню, используя textcontent заголовка и создавая список внутри которого содержится соответствующий id'у href (по задумке). но проблема в том, что только последний элемент добавляется в меню.

const d=document;
let h2s = d.getElementsByTagName("h2");
let article = document.getElementsByTagName("article")[0];
/*====================== строю DOM навигации =======================*/
function buildNavigation() {
    let articleNavigation = d.createElement("section"),
        articleNavigation__h3 = d.createElement("h3"),
        articleNavigation__ul = d.createElement("ul"),
        articleNavigation__li = d.createElement("li"),
        articleNavigation__navLinks = d.createElement("a");
    
    //класс, заголовок
    articleNavigation.className = "article-navigation";
    articleNavigation__h3.textContent = "Навигация по статье";
  //вставляю 
    articleNavigation.prepend(articleNavigation__h3);
    articleNavigation.append(articleNavigation__ul);
  
    for (let i = 0; i < h2s.length; i++) {
        articleNavigation__ul.append(articleNavigation__li);
        articleNavigation__li.append(articleNavigation__navLinks);
        articleNavigation__navLinks.setAttribute("href", "#" + i);
        articleNavigation__navLinks.textContent = h2s[i].textContent;
    }
    //^^^ в цикле скорее всего что то не так. создаётся ссылка только на последний элемент h2
    article.prepend(articleNavigation)
}
/**================================================================**/
function giveIdsToHeadings() {
    //присваиваем каждому заголовку id по порядку: "0, 1, 2..."
    for (let i = 0; i < h2s.length; i++) {
        h2s[i].setAttribute("id", i);
    };
};
if (h2s.length > 1) {
    giveIdsToHeadings();
    buildNavigation();
}
.article{
padding:0px 20px 20px 20px;
	width:1110px;
  margin:0 auto;
  border:1px solid violet;
}
.article-navigation {
	width:30%;

	padding:10px;

	margin:20px;

	border-radius:2%;
	border:1px dashed red;
	

}
.article-navigation > h3{
	color:#4c566a;
	text-align: center;
	font-size:1.2em;
}
.article-navigation li {
	margin-bottom:15px;
}
<article class="article">
<h2>первый</h2>
<h2>второй</h2>
<h2>третий</h2>
<h2>четвёртый</h2>
</article>

2

1 ответ 1

0

Создается только один элемент li и a, а затем перезаписывается в цикле. Нужно перенести li и a в цикл и в конце цикла добавлять к articleNavigation

function buildNavigation() {
    let articleNavigation = d.createElement("section"),
      articleNavigation__h3 = d.createElement("h3"),
      articleNavigation__ul = d.createElement("ul");

    articleNavigation.append(articleNavigation__ul);

    //класс, заголовок
    articleNavigation.className = "article-navigation";
    articleNavigation__h3.textContent = "Навигация по статье";
    //вставляю
    articleNavigation.prepend(articleNavigation__h3);


    for (let i = 0; i < h2s.length; i++) {
      let articleNavigation__li = d.createElement("li"),
        articleNavigation__navLinks = d.createElement("a");

      articleNavigation__li.append(articleNavigation__navLinks);
      articleNavigation__navLinks.setAttribute("href", "#" + i);
      articleNavigation__navLinks.textContent = h2s[i].textContent;

      articleNavigation__ul.append(articleNavigation__li);
    }

    article.prepend(articleNavigation)
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.