why is the Sort button not showing?-CodePudding

I created the sort button HTML element in javascript, and the button shows in the console, however, when I apply the sortList.style.display = "block"; to make it display when the add button is clicked the sort button shows as well, not sure why it is not showing.

I do have the sort button hidden in the CSS file, only so that I can have it show when submit event is clicked

const elements = {
    form: document.querySelector("#new-task-form"),
    input: document.querySelector("#new-task-input"),
    list: document.querySelector("#tasks"),
    cal: document.querySelector("#calendar"),
    sort: document.querySelector(".sort")


elements.list.addEventListener('click',event => {
    const {target} = event;

    const {id} = target.dataset;
    const task = id ? document.querySelector('[data-id="${id}"]'): null;
    const sortList = event.target.querySelector(".sort")

    for (var i=0; i < sortList.length; i  ){
        sortList[i].style.display = 'block';
    }

}

There is more to the code, however, it's just the sortList.style.display = "block"; I need help with.

Let me know if you need more of the code if the above does not help?

CodePudding user response：

I believe you want sortList to be done as follows:

const sortList = event.target.getElementsByClassName('sort')

for (var i=0; i < sortList .length; i  ) {
    sortList[i].style.display = 'block';
}

CodePudding user response：

I solved the issue. The issue was that it was not needed to add a display:none in the CSS file because the sort button would appear anyway along with the task list. as its only created in the tasks.innerHTML.

const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort" >Sort</button>
    <div  date-id = "${id}">
        <div >
            <input type ="checkbox" >
            <input type ="text" class = text id = "text" readonly>${task}
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = date id = "date">
        </div>

        <div class = "actions">
            <button  data-id="${id}">Edit</button>
            <button  data-id="${id}">Delete</button>
        </div>
    </div>
    `