使用Javascript在自己的div中的当前计数

当单击容器<div>中的按钮时，我正试图添加一个递增的计数。

我的代码不起作用，我缺少什么？

let taskCounter = 0;
let addTaskFunction = () => {
const container = document.querySelector(".container");
taskCounter++;
let counterInDiv = document.createElement(`<div> ${taskCounter} </div>`);
container.appendChild(counterInDiv);
};
document.getElementById('addTask').addEventListener("click", () => {
addTaskFunction();
});

<h1>Your tasklist for today</h1>
<div class="container">
<div class="inputPart">
<input id="taskInput" value="" placeholder="Fill in the following task here" />
<button id="addTask">Add task</button>
<button id="removeAllTasks">Delete tasks</button>
</div>
</div>

您需要使用document.createElement的标记名(div(，然后设置innerHTML，而不是使用实际的HTML代码。

let taskCounter = 0;
let addTaskFunction = () => {
const container = document.querySelector(".container");
taskCounter++;
let counterInDiv = document.createElement("div"); // <--HERE
counterInDiv.innerHTML = taskCounter;
container.appendChild(counterInDiv);
};
document.getElementById('addTask').addEventListener("click", () => {
addTaskFunction();
});

<body>
<h1>Your tasklist for today</h1>
<div class="container">
<div class="inputPart">
<input id="taskInput" value="" placeholder="Fill in the following task here" />
<button id="addTask">Add task</button>
<button id="removeAllTasks">Delete tasks</button>
</div>
</div>
<script src="app.js"></script>
</body>

我相信这就是您想要的代码：

let taskCounter = 1;
const taskList = document.getElementById("taskList");
const addTaskBtn = document.getElementById("addTask");
addTaskBtn.addEventListener("click", () => {
let task = document.getElementById("taskInput").value;
let counterInDiv = document.createElement("div");
counterInDiv.textContent = `${taskCounter++}: ${task}`;
taskList.appendChild(counterInDiv);
});
const deleteTasksBtn = document.getElementById("removeAllTasks");
deleteTasksBtn.addEventListener("click", () => {
taskList.innerHTML = "";
taskCounter = 1;
});

<h1>Your tasklist for today</h1>
<div class="container">
<div class="inputPart">
<input id="taskInput" placeholder="Fill in the following task here" />
<button id="addTask">Add task</button>
<button id="removeAllTasks">Delete tasks</button>
</div>
<div id="taskList"></div>
</div>

我做了一些更改：

事件监听器不需要函数，可以将代码放入传递给事件监听器的匿名函数中
taskCounter应该从1开始，而不是从0开始
如果您希望删除任务按钮起作用，那么您应该将任务放在一个可以轻松清除的不同容器中。我用了一个ID为"；taskList">
document.querySelector()只选择一个元素，但你给了它一个类"；容器"；。如果多个CCD_ 4具有类"0"；容器"；，那么你就会遇到问题
document.createElement采用标记名作为参数，而不是HTML代码。您应该使用document.createElement("div")，然后将.textContent设置为您想要的任何值

相关内容

最新更新

热门标签：