I’m building a page that has an "add another task" button. Each time it’s pressed, one hidden element is supposed to change CSS properties from "hidden" to "visible", adding one more row of inputs to the page. I’ve managed to get them all to reveal at once, but I’m trying to get the rows to show one at a time.
Here’s what I’ve written so far. Else if statements made the most sense to me, based on the SE posts I read about them, but with the first press of the button, both hidden rows ("task2" and "task3") reveal simultaneously. Am I using the wrong kind of conditional statement? Or do the statements need to be inside their own functions within the showNextTask function? I’d appreciate any help!
function showNextTask() {
let task2 = document.querySelector("#task-2-row");
let task3 = document.querySelector("#task-3-row");
if ((task2.style.visibility === "hidden")) {
task2.style.visibility = "visible";
task2.style.maxHeight = "80px";
} else if (
(task2.style.visibility === "visible") &&
(task3.style.visibility === "hidden")
) {
task3.style.visibility = "visible";
task3.style.maxHeight = "80px";
}
}
let nextInputTask = document.querySelector("#add-another-task-button");
nextInputTask.addEventListener("click", showNextTask);
>Solution :
You are using Assignment operator = instead of equality operator == or ===
Instead I suggest you can try to make a more generic function to add N number of task with the button
Try
<style>
.task-row {
visibility: hidden;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, visibility 0.3s ease-out;
margin-bottom: 10px;
}
</style>
<body>
<button id="add-another-task-button">Add Task</button>
<div id="task-container">
<!-- Tasks will be created dynamically -->
</div>
<script>
let taskCount = 0;
function addNewTask() {
taskCount++;
const taskContainer = document.querySelector("#task-container");
const newTask = document.createElement("div");
newTask.id = `task-${taskCount}-row`;
newTask.className = "task-row";
newTask.innerHTML = `Task ${taskCount}: <input type="text">`;
taskContainer.appendChild(newTask);
// Make new task visible
setTimeout(() => {
newTask.style.visibility = "visible";
newTask.style.maxHeight = "80px";
}, 0);
}
document.addEventListener("DOMContentLoaded", (event) => {
let nextInputTask = document.querySelector("#add-another-task-button");
nextInputTask.addEventListener("click", addNewTask);
});
</script>
This approach will help to create any number of task with ‘Add Task’ CTA.