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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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