Как сделать выполнение скрипта асинхронно в нескольких блоках?

Question

[Medvedoc]

Добрый день! Никак не получается найти решение для правильной работы скрипта. Имеется несколько однотипных блоков. В идеале в каждом блоке скрипт должен выполняться асинхронно, но он ни то, чтобы даже синхронно срабатывал сразу во всех блоках, а он только в первом блоке срабатывает.
Думал дело в использовании jquerySelector. Пробовал заменить его на jquerySelectorAll и потом перебирать находимые значения в цикле, но результата никакого.

Comments

[Сергей delphinpro]

Сделать то же самое, что посоветовали в этом ответе. Как сделать рабочим несколько слайдеров?

[Medvedoc]

Попробовал, но как-то криво все работает

document.querySelectorAll('.calendar').forEach(makeSlider)

function makeSlider(calendar) {

    const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

    isLeapYear = (year) => {
        return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 === 0)
    }

    getFebDays = (year) => {
        return isLeapYear(year) ? 29 : 28
    }

    generateCalendar = (month, year) => {

        let calendar_days = calendar.querySelector('.calendar-days')
        let calendar_header_year = calendar.querySelector('#year')

        let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

        calendar_days.innerHTML = ''

        let currDate = new Date()
        if (!month) month = currDate.getMonth()
        if (!year) year = currDate.getFullYear()

        let curr_month = `${month_names[month]}`
        month_picker.innerHTML = curr_month
        calendar_header_year.innerHTML = year

        // get first day of month

        let first_day = new Date(year, month, 1)

        for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
            let day = document.createElement('div')
            if (i >= first_day.getDay()) {
                day.classList.add('calendar-day-hover')
                day.innerHTML = i - first_day.getDay() + 1
                day.innerHTML += `<span></span>
                                <span></span>
                                <span></span>
                                <span></span>`
                if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
                    day.classList.add('curr-date')
                }
            }
            calendar_days.appendChild(day)
        }
    }

    let month_list = calendar.querySelector('.month-list')

    month_names.forEach((e, index) => {
        let month = document.createElement('div')
        month.innerHTML = `<div data-month="${index}">${e}</div>`
        month.querySelector('div').onclick = () => {
            month_list.classList.remove('show')
            curr_month.value = index
            generateCalendar(index, curr_year.value)
        }
        month_list.appendChild(month)
    })

    let month_picker = calendar.querySelector('#month-picker')

    month_picker.onclick = () => {
        month_list.classList.add('show')
    }

    let currDate = new Date()

    let curr_month = { value: currDate.getMonth() }
    let curr_year = { value: currDate.getFullYear() }

    generateCalendar(curr_month.value, curr_year.value)

    document.querySelector('#prev-year').onclick = () => {
        --curr_year.value
        generateCalendar(curr_month.value, curr_year.value)
    }

    document.querySelector('#next-year').onclick = () => {
        ++curr_year.value
        generateCalendar(curr_month.value, curr_year.value)
    }

    ///// новый код

    document.addEventListener('click', addDate);

    function addDate() {
        if (event.target.closest('.calendar-day-hover')) {

            let numbers = document.querySelectorAll('.calendar-day-hover');
            numbers = Array.from(numbers);

            numbers.forEach(function(item) {

                item.addEventListener('click', function() {

                    numbers.forEach(function(elem) {
                        // удаляем фон у всех дат
                        elem.classList.remove('curr-date');

                    });
                });
            });
            //// добавляем фон кликнутой дате
            event.target.classList.add('curr-date');

            let text = document.querySelector('.heading');

            /// получем месяц и год
            let month = document.querySelector('.month-picker');
            let date = document.querySelector('#year');

            /// добавляем дату в текст
            text.innerHTML = `${event.target.textContent} ${month.textContent}       ${date.textContent}`;
        }
    }
}

[alexalexes]

function makeSlider(calendar) {

    const month_names = ...

    isLeapYear = ....

    getFebDays = ....
....
}

Угадайте, в какую область видимости вываливает переменные isLeapYear, getFebDays? Правильно - в window.
Вдумчиво нужно рефакторить код, а не копипастить.

[Medvedoc]

alexalexes, хорошо тогда если сделать так, то все равно есть баги

let now = new Date().toLocaleDateString()
document.querySelector('.heading').innerText = now

let calendars = [...document.querySelectorAll('.calendar')]
for (const calendar of calendars) {
  const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

isLeapYear = (year) => {
    return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 === 0)
}

getFebDays = (year) => {
    return isLeapYear(year) ? 29 : 28
}

generateCalendar = (month, year) => {

    let calendar_days = calendar.querySelector('.calendar-days')
    let calendar_header_year = calendar.querySelector('#year')

    let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

    calendar_days.innerHTML = ''

    let currDate = new Date()
    if (!month) month = currDate.getMonth()
    if (!year) year = currDate.getFullYear()

    let curr_month = `${month_names[month]}`
    month_picker.innerHTML = curr_month
    calendar_header_year.innerHTML = year

    // get first day of month

    let first_day = new Date(year, month, 1)

    for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
        let day = document.createElement('div')
        if (i >= first_day.getDay()) {
            day.classList.add('calendar-day-hover')
            day.innerHTML = i - first_day.getDay() + 1
            day.innerHTML += `<span></span>
                            <span></span>
                            <span></span>
                            <span></span>`
            if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
                day.classList.add('curr-date')
            }
        }
        calendar_days.appendChild(day)
    }
}

let month_list = calendar.querySelector('.month-list')

month_names.forEach((e, index) => {
    let month = document.createElement('div')
    month.innerHTML = `<div data-month="${index}">${e}</div>`
    month.querySelector('div').onclick = () => {
        month_list.classList.remove('show')
        curr_month.value = index
        generateCalendar(index, curr_year.value)
    }
    month_list.appendChild(month)
})

let month_picker = calendar.querySelector('#month-picker')

month_picker.onclick = () => {
    month_list.classList.add('show')
}

let currDate = new Date()

let curr_month = { value: currDate.getMonth() }
let curr_year = { value: currDate.getFullYear() }

generateCalendar(curr_month.value, curr_year.value)

document.querySelector('#prev-year').onclick = () => {
    --curr_year.value
    generateCalendar(curr_month.value, curr_year.value)
}

document.querySelector('#next-year').onclick = () => {
    ++curr_year.value
    generateCalendar(curr_month.value, curr_year.value)
}


document.addEventListener('click', addDate);

function addDate() {
    if (event.target.closest('.calendar-day-hover')) {

        let numbers = document.querySelectorAll('.calendar-day-hover');
        numbers = Array.from(numbers);

        numbers.forEach(function(item) {

            item.addEventListener('click', function() {

                numbers.forEach(function(elem) {
                    // удаляем фон у всех дат
                    elem.classList.remove('curr-date');

                });
            });
        });
        //// добавляем фон кликнутой дате
        event.target.classList.add('curr-date');

        let text = document.querySelector('.heading');

        /// получем месяц и год
        let month = document.querySelector('.month-picker');
        let date = document.querySelector('#year');

        /// добавляем дату в текст
        text.innerHTML = `${event.target.textContent} ${month.textContent}       ${date.textContent}`;
    }
}
}

[Medvedoc]

Получается, что календари как бы появились, но при выборе даты в одном из них меняется значение в теге h1 первого календаре, а не в соответствующем. И активный выделенный день каждого календаря исчезает при следующем выборе в любом из других календарей.

[Medvedoc]

Хорошо, кое-какого результата добиться удалось
но перестали работать выбор месяца и года. Как исправить этот ньюанс?

[Medvedoc]

вопрос решен )