时间戳

首页 > 解决方案 > How Can I count items in a list in Vanilla Javascript?

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

问题描述

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>

标签： javascriptcounter

解决方案

todoList()只需在函数内重复孩子计数

 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);

或者您可以阅读javascript 中的Getter 和 Setter

推荐阅读