Kevin Powell - Community•2y ago

Unable to add data array into left side of the documentation page

I have a data array that consists of the items on the left side nav. I tried using several methods but I'm not able to add the data array items as list elements. Here is my codepen to check out my code - https://codepen.io/adarsh88/pen/gOjMEvz. I want to add the list items with the class "nav-link" inside the ul id of listElem (Add the list items under JS Documentation). Can someone guide me on how to do it?

24 Replies

Fartasia•2y ago

you have multiple formatting issues. I am surprised that anything renders!

Adarsh•2y ago

I put the html, css and js in a single html file. @fartasia What kind of formatting issue are you referring to?

Fartasia•2y ago

The CSS has no closiing </style> tag and the javascript is not enclosed in a <script> ... </script> block. Then there is the html...

Fartasia•2y ago

CodePen gives you 3 sections to simplify it for you...

Adarsh•2y ago

No there is a closing </style> and <script> tag Do look the entire html file

Fartasia•2y ago

not when I first looked

Adarsh•2y ago

I'll simplify it

Fartasia•2y ago

Put the html in the html box:

<body>
...
</body>

<body>
...
</body>

JS box:

let data = [
    "Introduction",
    "What you should already know<",
    "Javasript and Java",
    "Hello World<",
    "Variables",
    "Declaring variables",
    "Variable Scop",
];

let listElement = document.getElementsByClassName("listElem");

data.forEach(function (item) {
    let li = document.createElement("li");
    console.log(li);
    li.innerText = item;
    listElement.appendChild(li);
    getElementById("listElem");
});

console.log(listElement);

let data = [
    "Introduction",
    "What you should already know<",
    "Javasript and Java",
    "Hello World<",
    "Variables",
    "Declaring variables",
    "Variable Scop",
];

let listElement = document.getElementsByClassName("listElem");

data.forEach(function (item) {
    let li = document.createElement("li");
    console.log(li);
    li.innerText = item;
    listElement.appendChild(li);
    getElementById("listElem");
});

console.log(listElement);

Adarsh•2y ago

I've done it, please check it now @fartasia

Fartasia•2y ago

make it easy for you and those helping you!

Adarsh•2y ago

i get it, thanks for helping me to format it

Fartasia•2y ago

I'm off to eat dinner .. will be back later

Adarsh•2y ago

cool do check if you can help me @fartasia

Jochem•2y ago

document.getElementsByClassName returns an array, not a single element. You can either just pick the first element of the array:

let listElement = document.getElementsByClassName("listElem")[0];

let listElement = document.getElementsByClassName("listElem")[0];

or use document.querySelector, which returns the first result of a selector:

let listElement = document.querySelector(".listElem");

let listElement = document.querySelector(".listElem");

@adarsh8 Also, one last tip about codepen: You only put the contents of your body tag inside the HTML section, you don't need to wrap it in <html> or <body> tags, and shouldn't include a <head> and a general tip: Be strict with yourself about indenting your code, it makes it much more readable. Here it's hard to see at a glance that there's anything going on other than just some declarations and assignments:

let listElement = document.getElementsByClassName("listElem")[0];
data.forEach(function (item) {
let li = document.createElement("li");
li.innerText = item;
listElement.appendChild(li);
});

let listElement = document.getElementsByClassName("listElem")[0];
data.forEach(function (item) {
let li = document.createElement("li");
li.innerText = item;
listElement.appendChild(li);
});

Here, you can clearly see that there's a separate block of code, which means that code runs under different circumstances. The empty line between let listElement and data.forEach helps too, so that it's even easier to spot the loop.

let listElement = document.getElementsByClassName("listElem")[0];

data.forEach(function (item) {
  let li = document.createElement("li");
  li.innerText = item;
  listElement.appendChild(li);
});

let listElement = document.getElementsByClassName("listElem")[0];

data.forEach(function (item) {
  let li = document.createElement("li");
  li.innerText = item;
  listElement.appendChild(li);
});

You'll spend 90% of your time reading code, and only 10% writing it, so any extra time you spend making it easier to read when you're writing, pays off 10x later

MarkBoots•2y ago

maybe also look at document.querySelector() (first element) and document.querySelectorAll() (all elements) that uses css-selectors

Adarsh•2y ago

@jochemm I corrected the mistake and thanks for your advices. I will surely keep them in my mind

Adarsh•2y ago

@markboots. Could you explain how i could use document.querySelectorAll() for accessing the styles so that it shows like this

Jochem•2y ago

querySelectorAll returns an array of elements, so if you want to do something to multiple elements you have to loop over the result somehow, either using a regular for loop, or a .forEach

Adarsh•2y ago

I am little confused about it , could you help me out @jochemm I have updated the code pen, you could edit the code there

Jochem•2y ago

if you want to set a style on several elements in html, you have to select all those elements in javascript and then go over them one by one, you can't do it in bulk automatically. This would work:

let elements = document.querySelectorAll('.elementclass');
elements.forEach((elem) => {
  elem.classList.add('theclass');
});

let elements = document.querySelectorAll('.elementclass');
elements.forEach((elem) => {
  elem.classList.add('theclass');
});

or this:

let elements = document.querySelectorAll('.elementclass');
for (let i = 0; i < elements.length; i++) {
  elements[i].classList.add('theclass');
}

let elements = document.querySelectorAll('.elementclass');
for (let i = 0; i < elements.length; i++) {
  elements[i].classList.add('theclass');
}

Adarsh•2y ago

I already have the style "nav-link". I just have to add it to the list items

Jochem•2y ago

oh, that's probably even easier, you can just add it to the element when you create it:

data.forEach(function (item) {
  let li = document.createElement("li");
  li.innerText = item; 
  li.classList.add('nav-link');
  listElement.appendChild(li);
});

data.forEach(function (item) {
  let li = document.createElement("li");
  li.innerText = item; 
  li.classList.add('nav-link');
  listElement.appendChild(li);
});

Adarsh•2y ago

Oh yeah it worked out, thanks so much for helping and describing it so clearly @jochemm you should start a YT channel bro you explain so good

Jochem•2y ago

no worries, glad to help 🙂

Gaming

Programming

Unable to add data array into left side of the documentation page