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
you have multiple formatting issues. I am surprised that anything renders!
I put the html, css and js in a single html file. @fartasia
What kind of formatting issue are you referring to?
The CSS has no closiing
</style>
tag and the javascript is not enclosed in a <script> ... </script>
block. Then there is the html...CodePen gives you 3 sections to simplify it for you...
No there is a closing </style> and <script> tag
Do look the entire html file
not when I first looked
I'll simplify it
Put the html in the html box:
JS box:
I've done it, please check it now
@fartasia
make it easy for you and those helping you!
i get it, thanks for helping me to format it
I'm off to eat dinner .. will be back later
cool do check if you can help me @fartasia
document.getElementsByClassName
returns an array, not a single element. You can either just pick the first element of the array:
or use document.querySelector
, which returns the first result of a selector:
@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:
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.
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 latermaybe also look at
document.querySelector()
(first element) and document.querySelectorAll()
(all elements) that uses css-selectors@jochemm I corrected the mistake and thanks for your advices. I will surely keep them in my mind
@markboots. Could you explain how i could use document.querySelectorAll() for accessing the styles so that it shows like this
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
I am little confused about it , could you help me out @jochemm
I have updated the code pen, you could edit the code there
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:
or this:
I already have the style "nav-link". I just have to add it to the list items
oh, that's probably even easier, you can just add it to the element when you create it:
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
no worries, glad to help 🙂