How to return the number of HTML list elements on change using an event listener in JavaScript?

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 = '';
  }


 



}

JavaScript
​x
 
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;
}

JavaScript
 
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>

JavaScript
 
<!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;
}

JavaScript
 
largo.addEventListener('change', updateValue())
function updateValue(e) {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
lilist.length + 1 == e.target.value;
}
​

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 = '';
  }


 



}

JavaScript
 
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;
}

JavaScript
 
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>

JavaScript
 
<!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>

Advertisement

Answer