Dynamically added Item doesn't get appended the to the list
Question
I am trying to append a list item based on the input value. However, the list item doesn't get appended. I tried to have script tags at different points, but that doesn't help. What am I missing?
Here is my HTML
<body>
<main>
<div>
<form>
<input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
<button type="submit" id="addtodo">+</button>
</form>
<div class="AddedTodo">
<ul id="myList">
</ul>
</div>
<div>
<p id="clearAll">Clear All</p>
</div>
</div>
</main>
</body>
<script type="text/javascript" src="script.js"></script>
Here is my JavaScript.
document.getElementById("addtodo").onclick = function addItem() {
var ul = document.getElementById("newtodo").value;
var li = "<li>" + ul + "</li>";
document.getElementById("myList").appendChild(li);
}
4 answers
solution1
0 2020-08-13 01:45:53
Try this easy solution...
myList.innerHTML+='<li>'+newtodo.value+'</li>';
solution2
0 2020-08-13 01:48:10
Fist the button type should not be submit it should be type="button" and it's easy to use innerHTML .
<body>
<main>
<div>
<form>
<input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
<button type="button" id="addtodo">+</button>
</form>
<div class="AddedTodo">
<ul id="myList">
</ul>
</div>
<div>
<p id="clearAll">Clear All</p>
</div>
</div>
</main>
</body>
<script type="text/javascript" src="script.js"></script>
document.getElementById("addtodo").onclick = function addItem() {
const newtodo = document.getElementById("newtodo").value;
const myList = document.getElementById("myList");
myList.innerHTML += '<li>' + newtodo + '</li>';
}
solution3
0 ACCPTED 2020-08-13 01:57:32
You need to use createElement function to create your li to do items . and then use appendChild on that - Also consider using addEventListener
I have also added a functionality of clearAll button. Which will let you clear all to do items from your list.
Also, since you are using a form in your HTML which means the default behaviour is that it will reload the page. To stop that from happening use preventDefault method.
Live Demo:
var list = document.getElementById("myList") //Add to do's document.getElementById("addtodo").addEventListener('click', function(e) { e.preventDefault() var inputValue = document.getElementById("newtodo"); var li = document.createElement('li') li.textContent = inputValue.value list.appendChild(li) inputValue.value = '' }, false); //Clear all document.getElementById("clearAll").addEventListener('click', function(e) { e.preventDefault() list.innerHTML = '' }, false);
<body> <main> <div> <form> <input type="text" name="newtodo" id="newtodo" placeholder="New Todo..."> <button type="submit" id="addtodo">+</button> </form> <div class="AddedTodo"> <ul id="myList"> </ul> </div> <div> <button id="clearAll">Clear All</button> </div> </div> </main> </body>
solution4
0 2020-08-13 02:14:08
there is many todo liste sample code here on SO...
like this one: How do I append more than one child element to a parent element Javascript
you have missed that any form do a submit => send data and load new page (here it relod the same page)
your button is a submit, so you have to track the submit event, not the click event of the button...
const myForm = document.getElementById('my-form'), myList = document.getElementById('my-list'); myForm.onsubmit=e=> { e.preventDefault() // stop the form submit ( don't let him sending data to server, don't let a page quit and loading the same one) let todoText = myForm.newtodo.value.trim() // get the todo value without spaces before / after if (todoText.=='') { let liTodo = document.createElement('li') liTodo.textContent = todoText myList.appendChild(liTodo) myForm.newtodo.value = '' // cleaner } }
<form id="my-form"> <input type="text" name="newtodo" placeholder="New Todo..."> <button type="submit" >+</button> </form> <br> <ul id="my-list"></ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.