Using JS to make certain text appear when a list is empty

Question

I'm creating a simple contact list web app and the contacts are written in li elements. I have a text in a p#no-contacts element that I'm trying to set to display: block if the ul containing the li elements has 0 children, and display: none if the ul contains 1 or more children. I don't know why it's not working.

JSFiddle - https://jsfiddle.net/stqyujhw/

Line 94 in JS:

if (contactList.children.length < 1) {
    noContactsMessage.style.display = "block";
} else if (contactList.children.length >= 1) {
    noContactsMessage.style.display = "none";
}

Not sure what I'm doing wrong here. I'm still new to JS. Thanks in advance.

Vivek Singh · Accepted Answer · 2020-08-29 18:31:36Z

As per the fiddle link mentioned in the question

The piece of code should also be present in the event triggered when deleting and adding the contact. Example deleting contact should have this statement inside it

 function deleteContact(e) {
    if (e.target.classList.contains("delete")) {
        if (confirm("Are you sure?")) {
            e.target.parentElement.remove();
        }
    } else if (e.target.classList.contains("fas")) {
        if (confirm("Are you sure?")) {
            e.target.parentElement.parentElement.remove();
        }
    }
    if (contactList.children.length < 1) {
       noContactsMessage.style.display = "block";
    }
// NO CONTACTS MESSAGE IF THERE ARE NO CONTACTS


}

and Add function should look like this

function addContact(e) {
    e.preventDefault();
    const nameValue = addForm.querySelector("#name-input").value;
    const numberValue = addForm.querySelector("#number-input").value;
    const li = document.createElement("li");

    const nameSpan = document.createElement("span");
    nameSpan.classList.add("name");
    nameSpan.textContent = nameValue;

    const numberSpan = document.createElement("span");
    numberSpan.classList.add("number");
    numberSpan.textContent = numberValue;

    const deleteButton = document.createElement("span");
    deleteButton.classList.add("delete");
    const delIcon = document.createElement("i");
    delIcon.className = "fas fa-user-minus";
    deleteButton.appendChild(delIcon);

    li.appendChild(nameSpan);
    li.appendChild(numberSpan);
    li.appendChild(deleteButton);
    contactList.appendChild(li);
    if (contactList.children.length >= 1) {
    noContactsMessage.style.display = "none";
 } 
}

your logic is not getting called in the event that is the reason the code was not working as expected.

Asutosh · Accepted Answer · 2020-08-29 18:33:41Z

1

The code you have mentioned is not getting executed on each deletion or addition of li. It's just gets executed only once at the loading time. So move the code to event handler of above actions.

answered Aug 29, 2020 at 18:33

Asutosh

1,8382 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using JS to make certain text appear when a list is empty

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related