How Can I count items in a list in Vanilla Javascript?

Question

I want to create a counter for my to-do list. It's showing the count of all items. But it does not update when I add an item. It stays at 3.

It's my Javascript code;

var count = document.getElementById("list").childElementCount;
document.getElementById("title").innerHTML = ("You have " + count + " to-dos.");

// add item 
function todoList() {
    var item = document.getElementById("todoInput").value
    var text = document.createTextNode(item)
    var newItem = document.createElement("li")
    var check = document.createElement("span")
    check.className = "circle"
    newItem.appendChild(check)
    newItem.appendChild(text)
    document.getElementById("list").appendChild(newItem)

    // clear input value 
    document.getElementById("todoInput").value = "";
}

document.getElementById("add").addEventListener('click', todoList, null);

It's my Html code;

<div class="progress">
    <div id="title"></div>
</div>

<ul id="list">
    <li><span class="circle"></span>Buid a task app</li>
    <li><span class="circle"></span>Do exercise</li>
    <li><span class="circle"></span>Buy headphones</li>
</ul>

You need to show your code where you add an item - you probably need to run that bit of js again that you do show — Pete, Apr 15 '19 at 11:17
"_it does not update when I add an item_" Show us that updating code. — takendarkk, Apr 15 '19 at 11:18
Ok yes, you need to run the code again in your todolist - you only run it once so when you change the dom, you need to run it again - it won't magically update itself just because you update the dom — Pete, Apr 15 '19 at 11:24

score 2 · Answer 1 · answered Apr 15 '19 at 11:27

Just repeat the children count inside the todoList() function

 var count = document.getElementById("list").childElementCount;
  document.getElementById("title").innerHTML = ("You have " + count + " to-dos.");

// add item 
function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  var check = document.createElement("span")
  check.className = "circle"
  newItem.appendChild(check)
  newItem.appendChild(text)
  document.getElementById("list").appendChild(newItem)


  count = document.getElementById("list").childElementCount;
  document.getElementById("title").innerHTML = ("You have " + count + " to-dos.");

  // clear input value 
  document.getElementById("todoInput").value = "";

}

document.getElementById("add").addEventListener('click', todoList, null);

or you can read about Getters and Setters in javascript

score 1 · Accepted Answer · answered Apr 15 '19 at 11:46

The DRY method is to create a function that you can call so you don't need to duplicate any code.

// Cache your elements
const title = document.getElementById('title');
const list = document.getElementById('list');
const input = document.getElementById('todoInput');
const add = document.getElementById('add')

// A new updateCount function
function updateCount() {
  const count = list.childElementCount;

  // Using a template literal is tidier than string concatenation
  // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals
  title.innerHTML = `You have ${count} to-dos.`;
}

function todoList() {
  const item = input.value
  const text = document.createTextNode(item)
  const newItem = document.createElement('li')
  const check = document.createElement('span')
  check.className = 'circle'
  newItem.appendChild(check)
  newItem.appendChild(text)
  list.appendChild(newItem)
  input.value = '';

  // Call your updateCount function after a new item
  // has been added
  updateCount();
}

// Call updateCount initially when the page loads
updateCount();
add.addEventListener('click', todoList, false);

<div class="progress">
  <div id="title"></div>
</div>

<ul id="list">
  <li><span class="circle"></span>Build a task app</li>
  <li><span class="circle"></span>Do exercise</li>
  <li><span class="circle"></span>Buy headphones</li>
</ul>

<input id="todoInput" />
<button id="add">Add</button>

How Can I count items in a list in Vanilla Javascript?

2 Answers2