Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lee Cockcroft
5,147 Pointscreating elements
Hi all,
Could someone please explain what is wrong with the below code?
I've been having difficulties with document.querySelector etc, so wanted to try this all via the elementByID. However it doesn't work?
I am able to create a new li, but the value will not add?
any ideas?
Thanks Lee
<ul id="myul">
<li>test</li>
<li>testing</li>
<li>test</li>
<li>testing</li>
<li>test</li>
<li>testing</li>
</ul>
<input id="myTest"/>
<button id="myTestButton">add</button>
<button id="myTestButtonRemove">remove</button>
<script>
const testlist = document.getElementById("myul");
const theinput = document.getElementById("myTest");
const buttontest=document.getElementById("myTestButton");
buttontest.addEventListener("click",() => {
let litest=document.createElement("li");
litest.textContent=theinput.value;
testlist.appendChild(litest);
});
</script>
Moderator edited: markdown was added to the question to properly render the code. Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community.
2 Answers
Lee Cockcroft
5,147 PointsThat is very strange!
I have just copied mine to "jsbin" and it works fine, just like your link.However on all my browsers a new li appears with no text??Any ideas?
Jennifer Nordell
Treehouse TeacherThat is strange! I have successfully run your code locally on both Firefox and Chrome. This makes me wonder if it's loading in cached data. Have you tried clearing the cache or alternatively running it in a private/incognito tab?
Lee Cockcroft
5,147 PointsI have created 2 different lists on the page, both with an add and remove li function.
When I delete the first list, the list i have provided here works fine!
I don't have the code with me at the moment, but any ideas on why this is the case?
Mine successfully adds an li, but has no text?! (the 1st list I created adds the text and works fine)
Jennifer Nordell
Treehouse TeacherCan you confirm that you've tried clearing your browser cache before attempting and then refreshing? I still feel like this has something to do with your browser and not the code. The code runs fine locally for me in two separate browsers and also on the jsfiddle.
Jeremiah Bushau
24,061 PointsJeremiah Bushau
24,061 Pointshey, as far as adding a new li with the input value, this code seems to work for me! what exactly are you having trouble with?
https://jsfiddle.net/0pacdkq1/ <-- link to example of your code working.