im asking for help because when i click the button, nothing appears.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do list</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<header>
<h1 id="planning">What are you planning to do today ?</h1>
</header>
<ul id="list">
<li>
<input type="checkbox" class="checkbox" id="checkbox1">
<input type="text" placeholder="Go groceries shopping, call Peter, ..." id="taskAdder">
</li>
<!-- <li>
<input type="checkbox" class="checkbox" id="checkbox2">
<input type="text id="task2>
</li> -->
</ul>
<button id="btn">+</button>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Here is my html, I have an input where i write my task right after my checkbox input, a list where tasks added will be, and a button under this list that adds the task.
let btn = document.getElementById("btn");
let list = document.getElementById("list");
let taskAdder = document.getElementById("taskAdder");
let conteur = 2;
btn.addEventListener("click", createNewTask);
function createNewTask() {
if (taskAdder.value !== '') {
let newLi = document.createElement("li");
newLi.id = `liItem${conteur}`;
let newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.className = "checkbox";
newCheckbox.id = `checkbox${conteur}`;
let newInput = document.createElement("input");
newInput.id = `task${conteur}`;
newInput.htmlFor = newInput.id;
newInput.textContent = taskAdder.value;
list.appendChild(newLi);
newLi.appendChild(newCheckbox);
newLi.appendChild(newInput);
conteur++;
taskAdder.value = '';
taskAdder.placeholder = "Go groceries shopping, call Peter, ...";
} else {
alert("Please type something you want to do to create a task");
}
}
Here is my js, i add an eventlistener to my button and tell him to execute the function createNewTask. In this function, i check first if the taskAdder input is empty, if true i alert, if false i create a list item, create a checkbox input and create a text input, i append my list item to my unordered list, then i append my two inputs to my list item. Finally i reset my taskAdder file.
I'm a beginner so excuse me for the quality of my explanation and my code.
I tried to debug, but no bugs are showing, i tried to see if there was typos errors in my code but i think there isn't. As im a beginner i think there is something i missed or something i don't know yet.