Assistance in code {JS,HTML,CSS}

HTML/CSS
1

Hey guys , i need assistance in a code .

My website purpose is ease Task managment . (its for a school project) .

Okay so i will first start with my issue : The Edit button of my tasks(Menu-card.png) isnt doing anything after clicking it … and i have no clue why . i will share what i think is relevent to it from the code

JS Code : `function updateDisplay(){

let updatedTasks = [];
updatedTasks = JSON.parse(localStorage.getItem('tasks'));
let dayButtonSelected = parseInt(document.getElementsByClassName("date-selected")[0].id);

tasks.innerHTML = ""

var tasksArray = [];

updatedTasks.forEach(element => {

    let elementDate = element.date;
    let  elementDay = elementDate.split('-');

    if(elementDay[2] == dayButtonSelected){
        tasksArray.push(element);
    }

});

if(tasksArray.length >= 1){

    tasksArray.forEach(element => {

    let div = document.createElement("div");

    var divTextColor = "";
    var divMarginColor = "";

    if(element.category == "Development"){
        divTextColor = "type-development";
        divMarginColor = "event-development";
    }else if(element.category == "University"){
        divTextColor = "type-university";
        divMarginColor = "event-university";
    }else{
        divTextColor = "type-home";
        divMarginColor = "event-home";
    }



    div.innerHTML = `

    <div class="event-card">
            <div class="type ${divTextColor}">
                <p>${element.category}</p>
            </div>
            <div class="event-content ${divMarginColor}">
                <img src="/static/assets/menu-card.png" class="menu-card m-${dayButtonSelected}">
                <h3>${element.name}</h3>
                <p>${element.comment}</p>
            </div>
            <div class="event-info">
                <div class="time">${element.startTime} - ${element.finishTime}</div>
                <div class="status">Active</div>
            </div>
        </div>

    `;

    tasks.appendChild(div)

    });

}else{

    tasks.innerHTML = ` <p style="text-align: center; margin: 30px;">
                            There are no tasks for this day, press the button to create a new
                        </p>
                        <button onclick="changeDisplay()" id="new-task-secondary" style="width: 100px; display: block; margin: auto; background: var(--blue-main-bg-color); padding: 20px;border-radius: 25px;cursor: pointer;">
                                  <img src="/static/assets/add.svg">
                        </button>
                        `
}

}`

And the HTML Code of the page : `

Task Management {% include 'navbar.html' %} 

        <div class="form-add-task" id="form-add-tasks">
            <div class="task-saved" id="task-saved">
                <img src="/static/assets/confirm-img.png" alt="">
                <p>Task saved Successfuly</p>
            </div>
            <form id="form">
                <input type="text" autocomplete="off" placeholder="Task name" id="task-name" name="task-name">
                <div class="date-div">
                    <label for="datepicker" class="label-form">Date</label>
                    <input id="datepicker" autocomplete="off" class="task-date" placeholder="Task date" name="datepicker">
                    <img src="/static/assets/icon-calendar.svg" class="icon-calendar">
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <div class="task-time">
                            <label for="task-start-time"" class="label-form">Start</label>
                            <input  name="task-start-time" id="task-start-time" class="timepicker" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <div class="task-time" id="task-time-div">
                            <label for="task-finish-time" class="label-form">End</label>
                            <input  name="task-finish-time" id="task-finish-time" class="timepicker2" autocomplete="off" disabled>
                        </div>
                    </div>
                </div>
                <div class="task-info">
                    <label for="task-info" class="label-form">Description</label>
                    <input type="text" autocomplete="off" id="task-info" placeholder="Describe your task" name="task-info">
                </div>

                <label for="" class="label-form">Category</label>
                <div class="task-category">
                    <div class="develop" id="develop-div">
                        <input type="radio" name="category" id="develop-input" value="Development">
                        <label for="develop-input">Development</label>
                    </div>
                    <div class="university" id="university-div">
                        <input type="radio" name="category" id="university-input" value="University">
                        <label for="university-input">University</label>
                    </div>
                    <div class="home" id="home-div">
                        <input type="radio" name="category" id="home-input" value="Home">
                        <label for="home-input">Home</label>
                    </div>
                </div>
                <p id="error"></p>
                <button class="button-add-task">Create new Task</button>
            </form>
        </div>

        <div class="footer">
            <p>Have a Great Day !</p>
            <a href=""><img src="/static/assets/heart.png" alt="" class="ILY"></a>
        </div>
    </section>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
`
2

Hi,

What did you try to understand the problem ?
Fo instance did you use the dev tools ?
Did yo add any plumbing code to check click event works ?

Regards.