Using forEach method with Array to build navigation menu and unordered list with JS

Question

I am trying to generate an unordered list and also navigation bar using JavaScript.

This is the JS snippet I have (looping through an Array using a forEach method):

const navMenu = document.querySelectorAll("page_header");
const navList = document.getElementById("menu_list");
const items = Array.from(document.querySelectorAll("section"));
items.forEach((item, i) => {

    const listItem = document.createElement("li");
    listItem.classList.add("menu-item");
    const anchorTag = document.createElement("a");
    anchorTag.innerText = item;
    const sectionName = item.getAttribute('data-nav');
    const sectionID = item.getAttribute('id');
    listItem.innerHTML = createNavItemHTML(sectionID, sectionName);
    navList.appendChild(listItem);

});

I also want to rewrite this function somehow since I took it straight off from a github repo that I am not comfy taking straight off.

 function createNavItemHTML(id, name) {
        const itemHTML = `<a class ="menu__link" data-id="${id}">${name}</a>`;
        return itemHTML;
    }

I simply want to include an anchor tag in my unordered list for each list item. But cannot get it to work...

Thanks in advance.

anchorTag.innerText = item; are you trying to put section elements into a elements? You cannot assign objects to innerText. Please add information as of what functionality you are trying to implement. — connexo
– connexo, Commented Nov 10, 2021 at 17:55
Oh, good question. This is a mistake I guess. I want to create my list items as "clickable" links. Directing them to relevant section on the page. — Jonas Achouri Sihlén
– Jonas Achouri Sihlén, Commented Nov 10, 2021 at 17:58
Thanks @connexo for your input and clarification on innerText. The main functionality is to create an unordered list and present it in a navbar with anchor links to each section. The id's and data-nav attributes are retrieved from each of the 6 sections. I tried your snippet below and it works. Will just have to adjust so they are presented as a horizontal navBar. Thanks alot! — Jonas Achouri Sihlén
– Jonas Achouri Sihlén, Commented Nov 10, 2021 at 18:32

connexo · Accepted Answer · 2021-11-10 18:03:09Z

1

You can simplify your code alot:

const navList = document.getElementById("menu_list");
const sections = document.querySelectorAll("section");
for (const section of sections) {
    const li = document.createElement("li");
    li.className = "menu-item";
    const a = document.createElement("a");
    a.textContent = section.dataset.nav;
    a.href = `#${section.id}`;
    li.appendChild(a);
    navList.appendChild(li);
};

answered Nov 10, 2021 at 18:03

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

2 Comments

Jonas Achouri Sihlén Over a year ago

Wow, thanks a lot for a swift and crisp response. @connexo Very much appreciated. I am new to this so excuse me for asking, but is it ok to use this snippet in my project, accrediting you of course?

connexo Over a year ago

That is trivial code, no need for attribution :)

Collectives™ on Stack Overflow

Using forEach method with Array to build navigation menu and unordered list with JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related