Currently, I am in the process of developing a Project Manager website by utilizing w3school's To-do-list tutorial. To enhance the functionality, I have included a detail button (denoted by ...) that triggers a modal displaying task information. However, I am faced with the challenge of manually creating individual modals for each task on the list.
My inquiry is: Is there a method to automatically generate unique modals for every element present in the list?
// Get the modal
var modal = document.getElementsByClassName("modal");
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
// Click on a detail button to show detail of the task item
var detail = document.getElementsByClassName("detail");
var count = 0; // keep track of task count (must be less than 10)
var maxcount = 10;
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
if (count < maxcount) {
count = count + 1;
document.getElementById("myUL").appendChild(li);
}
}
document.getElementById("myInput").value = "";
// Create close button for each element
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
// Create detail button for each element
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u2026");
span.className = "detail";
span.appendChild(txt);
li.appendChild(span);
// Function of close button
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
count = count - 1;
var div = this.parentElement;
div.style.display = "none";
}
}
var detail = document.getElementsByClassName("detail");
var modal = document.getElementsByClassName("modal");
var span = document.getElementsByClassName("modalclose");
// Functionality of detail button
detail[0].onclick = function() {
modal[0].style.display = "block";
}
span[0].onclick = function() {
modal[0].style.display = "none";
}
window.onclick = function(event0) {
if (event0.target == modal[0]) {
modal[0].style.display = "none";
}
}
/* Repeat the above sections for multiple tasks */
}/* CSS styles go here */<!-- HTML structure goes here -->