I began creating a dynamic portfolio, where an array will automatically populate an ordered list with list items. The list items will have the label as the name and the url as the link.
This has mostly worked, except the problem is that I cannot get the 'href' attribute in the tag to change. Instead of being week1/index.html, it ends up being [object Text]. You can see this in the HTML picture. When looking at the URL in my browser when viewing the HTML page, it says [object%20Text] at the end of the URL instead of week1/index.html at the end.
I have tried using setAttribute, as is shown in the code. I have also tried using newA.href = newURL. What I'm doing seems to match solutions that I have found on the internet, but it isn't working. If I remember correctly, I also tried manipulating the onclick attribute to change the link when it is clicked, but that wasn't working either. If there's a syntax issue, I am unaware of it.
I was curious if my newUrl variable had the correct information, and it does. If I do newA.appendChild(newUrl) instead of newA.appendChild(newLabel), it will correctly show that as the label of the list item. If I do newA.setAttribute("href", newLabel) instead of using newUrl, then it will show the same [object Text] inside the href attribute.
Thank you for taking the time to look at this and think about what the issue is.
Always paste your code here so that we can help you more easily.
you're calling
const newUrl = document.createTextNode(links[i].url);
which creates a text object
then you have newA.setAttribute("href", newUrl); which sets the href attribute to that TEXT OBJECT like it shows in your rendered html.
correct the declaration/initialization line to a string
const newUrl = links[i].url;
