My todo list appends every input value starting with the number of elements in the list. So, entering the first item “Do homework” outputs to “1. Do homework.” And the second input “Learn JS” outputs to “2. Learn JS.” However, when deleting an element in the middle of the list, the number adjacent to the item doesn’t adjust accordingly to the number of current list elements.
For example, if the output is:
1. Do homework
2. Learn JS
3. Practice piano
Deleting number 2 will return:
1. Do homework
3. Practice piano
Instead of the correct output:
1. Do homework
2. Practice piano
var listset = document.querySelector('#add').addEventListener('click', newItem);
function newItem() {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
var largo = lilist.length + 1
var node = document.createElement('li');
var inputValue = document.getElementById('input').value
const delButton = document.createElement('img')
delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
delButton.width = 15;
delButton.height = 15;
delButton.addEventListener('click', function(e){
e.target.closest('li').remove()
})
var textNode = document.createTextNode(largo +'. '+ inputValue + " ");
node.appendChild(textNode)
if (inputValue !== '') {
var item = document.getElementById('listForm').appendChild(node);
item.appendChild(delButton)
document.getElementById('input').value = '';
}
}h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 35px;
text-align: center;
}
.header2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
}
.main-page {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ul {
list-style-type: none;
margin-top: 150px;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
li {
margin-top: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 100px;
padding: 10px 10px;
width: 40%;
margin-bottom: -151px;
}
#input {
font-size: 18px;
}
#add {
background-color: rgb(233, 235, 235);
font-size: 18px;
margin-left: -3px;
}
#listForm {
color: black;
margin-left: 100px;
width: 284px;
}
li {
margin-bottom: -5px;
}
li:hover {
cursor: grab;
color: rgb(176, 171, 171)
}
#listForm .checked {
text-decoration: line-through;
}
.unchecked {
text-decoration: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To Do List: Raamis Ali</title>
<meta name="description" content="A todo list application">
<meta name="author" content="Raamis Ali">
<link rel="stylesheet" href="list.css"> </head>
<body>
<script src="javascript.js"></script>
<div class="main-page">
<h1>To Do List Web App</h1>
<p class="header2">Created by Raamis Ali</p>
<div class="list">
<input type="text" id="input" placeholder="Add items">
<input type="button" value="Add" id="add" onclick="newItem()"> </div>
<ul id="listForm">
</ul>
<br> </div>
</body>
</html>I have tried implementing this event listener and function with different variations of this but I have had no success:
largo.addEventListener('change', updateValue())
function updateValue(e) {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
lilist.length + 1 == e.target.value;
}
Advertisement
Answer
For sure the number will not change, because you didn’t re-initialize the list text with new numeric values.
As @Barmar suggest, it would better to use “ol” element instead of “ul” which will output the correct numeric order of the list.
var listset = document.querySelector('#add').addEventListener('click', newItem);
function newItem() {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
var node = document.createElement('li');
var inputValue = document.getElementById('input').value
const delButton = document.createElement('img')
delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
delButton.width = 15;
delButton.height = 15;
delButton.addEventListener('click', function(e){
e.target.closest('li').remove()
})
var textNode = document.createTextNode(inputValue + " ");
node.appendChild(textNode)
if (inputValue !== '') {
var item = document.getElementById('listForm').appendChild(node);
item.appendChild(delButton)
document.getElementById('input').value = '';
}
}h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 35px;
text-align: center;
}
.header2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
}
.main-page {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ol {
margin-top: 150px;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
li {
margin-top: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 100px;
padding: 10px 10px;
width: 40%;
margin-bottom: -151px;
}
#input {
font-size: 18px;
}
#add {
background-color: rgb(233, 235, 235);
font-size: 18px;
margin-left: -3px;
}
#listForm {
color: black;
margin-left: 100px;
width: 284px;
}
li {
margin-bottom: -5px;
}
li:hover {
cursor: grab;
color: rgb(176, 171, 171)
}
#listForm .checked {
text-decoration: line-through;
}
.unchecked {
text-decoration: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To Do List: Raamis Ali</title>
<meta name="description" content="A todo list application">
<meta name="author" content="Raamis Ali">
<link rel="stylesheet" href="list.css"> </head>
<body>
<script src="javascript.js"></script>
<div class="main-page">
<h1>To Do List Web App</h1>
<p class="header2">Created by Raamis Ali</p>
<div class="list">
<input type="text" id="input" placeholder="Add items">
<input type="button" value="Add" id="add" onclick="newItem()"> </div>
<ol id="listForm">
</ol>
<br> </div>
</body>
</html>