I need to make reservation system for test with HTML, CSS, JS. i have button next, i need to know if some one of li selected then it will be work, if no one li is selected then it must be show me alert.
There is code.

const staff = [
    {
        "id": 1,
        "name": "Alex Rosetta",
        "email": "alexyrosetta@egmail.com",
        "image": "https://i.ibb.co/LJnNhRF/unsplash-279x-IHym-PYY.png",
    },
    {
        "id": 2,
        "name": "Maria July",
        "email": "mariajuly@egmail.com",
        "image": "https://i.ibb.co/3FhkswY/unsplash-IF9-TK5-Uy-KI.png",
    }
];
const services = [
    {
        "id": 1,
        "name": "Oral hygiene",
        "image": "https://i.ibb.co/XkRzNyr/Oval-2.png",
        "duration": "1 hour",
        "price": 50.00,
    },
    {
        "id": 2,
        "name": "Implants",
        "image": "https://i.ibb.co/Pr5m2kY/Oval-1.png",
        "duration": "1 hour 30 minutes",
        "price": 120.00,
    }
];





function getHTML(data) {
    return staff.map(obj => {
        const { id, name, email, image } = obj;
        return `
      <li class="repoFolder" data-value="${id}">
        <div class="doc-photo">
          <img src="${image}" alt="Image of ${name}" />
        </div>
        <div class="doc-infos">
          <p class="name">${name}</p>
          <p class="mail">${email}</p>
        </div>
      </li>
    `;
    }).join('');
}

const list = document.querySelector(".myUl");
list.addEventListener('click', handleList);



list.insertAdjacentHTML('beforeend', getHTML(staff));


const items = list.querySelectorAll('.myUl li');


function handleList(e) {
    if (e.target.closest('li')) {
        const parent = e.target.closest('li');
        items.forEach(item => item.classList.remove('my-class'));
        parent.classList.add('my-class');
    }
}
var next = document.querySelector('.next-btn');
next.addEventListener("click", myFunction2);
for (var i = 0; i < items2.length; i++) {
    document.querySelector('.next-btn').onclick = function () {
        document.querySelector(".myUl li").forEach(item => item.classList.contains('my-class'));
        document.querySelector('.container').classList.add('hide');
        document.querySelector('.container').classList.remove('show');
        document.querySelector('.container2').classList.add('show');
        document.querySelector('.container2').classList.remove('hide');

    };
}

function myFunction2(e) {
    if (document.querySelector(".myUl li").classList.contains('my-class')) {
        document.querySelector('.container').classList.add('hide');
        document.querySelector('.container').classList.remove('show');
        document.querySelector('.container2').classList.add('show');
        document.querySelector('.container2').classList.remove('hide');
    } else {
        alert("hey")
    }
}
var lis = document.querySelector(".myUl li");
for (i = 0; i < lis.length; i++) {
    console.log(lis[i].id);
    function myFunction2(e) {
    if (document.querySelector(".myUl li").classList.contains('my-class')) {
        document.querySelector('.container').classList.add('hide');
        document.querySelector('.container').classList.remove('show');
        document.querySelector('.container2').classList.add('show');
        document.querySelector('.container2').classList.remove('hide');
    } else {
        alert("hey")
    }
}
}

I tried like this, but its working only for first li

var selected = document.querySelector(".myUl li");
selected.forEach(function(item) {
    if (item.classList.contains('my-class')) {
        document.querySelector('.container').classList.add('hide');
        document.querySelector('.container').classList.remove('show');
        document.querySelector('.container2').classList.add('show');
        document.querySelector('.container2').classList.remove('hide');
    } else {
        alert("hey")
    }
});

Can someone help please?

Thank you so much!

>Solution :

you must use querySelectorAll, then change ur code like this 🙂

function myFunction2(e) {
const liElements = document.querySelectorAll(".myUl li");
liElements.forEach(li => {
    if (li.classList.contains('my-class')) {
        document.querySelector('.container').classList.add('hide');
        document.querySelector('.container').classList.remove('show');
        document.querySelector('.container2').classList.add('show');
        document.querySelector('.container2').classList.remove('hide');
    }
});
if (Array.from(liElements).filter(li => li.classList.contains('my-class')).length == 0) {
    alert("hey")
}
}