Current number of count in own div with Javascript-CodePudding

Hope you can help. I have the following problem, I am trying to add an increasing count number on click in my own <div>, within the container <div>.

My code is not working, what am I missing?

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

<body>
  <h1>Your tasklist for today</h1>
  <div >
    <div >
      <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>

CodePudding user response：

You need to use the tag name (div) for document.createElement then set the innerHTML instead of using the actual HTML code.

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

CodePudding user response：

I believe that this is the code you want:

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

<body>
  <h1>Your tasklist for today</h1>
  <div >
    <div >
      <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>
  <script src="app.js"></script>
</body>

I made a few changes:

You do not need a function for the event listener, you can put the code inside an anonymous function that is passed to the event listener
taskCounter should start at 1, not 0
If you want the delete tasks button to work, then you should put the tasks inside a different container that can be easily cleared. I used one with the ID of "taskList"
document.querySelector() only selects a single element, but you gave it a class of "container". If multiple <div>s have the class "container", then you will run into problems.
document.createElement takes a tag name as the parameter, not HTML code. You should use document.createElement("div") then set the .textContent to whatever you want.