I am currently working on developing a To-Do list application using express and EJS middleware. The main feature of this app is to display a list of tasks with checkboxes next to each task added. When a task is completed, the user can mark it as done by checking the checkbox, which will then strike through the text to indicate completion. I have attempted to implement this functionality using JavaScript at the end of my .ejs file, but there seems to be an issue preventing it from working properly.
Below is a snippet of the EJS code:
<% for(var i = listItems2.length -1; i >= 0; i--){ %>
<div class="flex">
<input type="checkbox" name="checker" id="checkbox_id" class="h-7 w-7 m-3 flex-shrink-0">
<p name="para" class="text-[32px] font-[200]"><%= listItems2[i] %></p>
</div>
<% } %>
And here is the accompanying JavaScript code:
<script>
var boxes = document.getElementsByName("checker");
var paras = document.getElementsByName("para");
function updateStyle() {
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].checked) {
paras[i].style.webkitTextStroke = "1px black";
paras[i].style.textStroke = "1px black";
} else {
paras[i].style.webkitTextStroke = "none";
paras[i].style.textStroke = "none";
}
}
}
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("change", updateStyle);
}
</script>