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
Fartasia•2y ago
you have multiple formatting issues. I am surprised that anything renders!
Adarsh
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
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
Fartasia•2y ago
CodePen gives you 3 sections to simplify it for you...
Adarsh
Adarsh•2y ago
No there is a closing </style> and <script> tag Do look the entire html file
Fartasia
Fartasia•2y ago
not when I first looked
Adarsh
Adarsh•2y ago
I'll simplify it
Fartasia
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
Adarsh•2y ago
I've done it, please check it now @fartasia
Fartasia
Fartasia•2y ago
make it easy for you and those helping you!
Adarsh
Adarsh•2y ago
i get it, thanks for helping me to format it
Fartasia
Fartasia•2y ago
I'm off to eat dinner .. will be back later
Adarsh
Adarsh•2y ago
cool do check if you can help me @fartasia
Jochem
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
MarkBoots•2y ago
maybe also look at document.querySelector() (first element) and document.querySelectorAll() (all elements) that uses css-selectors
Adarsh
Adarsh•2y ago
@jochemm I corrected the mistake and thanks for your advices. I will surely keep them in my mind
Adarsh
Adarsh•2y ago
@markboots. Could you explain how i could use document.querySelectorAll() for accessing the styles so that it shows like this
Jochem
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
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
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
Adarsh•2y ago
I already have the style "nav-link". I just have to add it to the list items
Jochem
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
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
Jochem•2y ago
no worries, glad to help 🙂
Want results from more Discord servers?
Add your server