我想为我的待办事项清单创建一个计数器。它显示所有项目的数量。但是当我添加项目时它不会更新。它保持在3。
这是我的Javascript代码;
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);
这是我的HTML代码;
<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>
答案 0 :(得分:1)
只需在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中阅读有关Getters and Setters的信息
答案 1 :(得分:1)
DRY方法是创建一个可以调用的函数,因此您无需重复任何代码。
new StaggeredGridLayoutManager(2, LinearLayoutManager.HORIZONTAL);
// 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);