Работает только клик по первому элементу

[Leon2110]

Здравствуйте, проблема такая: есть сайт на bootstrap, я вывожу список материалов, у каждого материала есть кнопка "поделиться", при клике на нее должно сверху браузера выходить уведомление, что ссылка скопирована. Я сделал эти уведомления на Bootstrap Alerts, вот как это работает, все просто:

На сайте, сверху есть блок для показа уведомлений (пустой пока)

<div id="liveAlertPlaceholder" class="alert-message"></div>

В каждом материале (их 10шт на странице) есть кнопка с id liveAlertBtn (я понимаю что нельзя один id 10 раз, но пока так:

<a href="##" class="share" id="liveAlertBtn">Поделиться</a>

В js из документации бутстрапа:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
    var wrapper = document.createElement('div')
    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

    alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
    alertTrigger.addEventListener('click', function () {
        alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success')
        // Скрываем алерт через 4 секунды
        window.setTimeout(function () { $(".alert-success").alert('close'); }, 4000);
    })
}

Нужно думаю как-то изменить js, (возможно 2 и 12 строки js) чтобы работало не с id getElementById, а с классом share например (он там есть). Туплю не получается исправить.

По итогу, клик по первому элементу показывает уведомления, клик по остальным 9 элементам на странице ничего не показывает и ошибку не выводит.

[voraa]

(я понимаю что нельзя один id 10 раз, но пока так:

Поэтому пока и не работает. getElementById находит только первый элемент с таким ид.
По классу можно найти элемент используя querySelector. Но он тоже найдет только первый. Не видя всей разметки, как там у вас организованы блоки ваших материалов, подсказать трудно.

[рони]

Leon2110,

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')

        function alert(message, type) {
            var wrapper = document.createElement('div')
            wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

            alertPlaceholder.append(wrapper)
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('[id=liveAlertBtn]')) return;
            alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success')
            // Скрываем алерт через 4 секунды
            window.setTimeout(function() {
                $(".alert-success").alert('close');
            }, 4000);
        })

[Leon2110]

рони, Спасибо, это работает как нужно

[Niamherr]

I understand your struggle with using getElementById effectively. It can be tricky when dealing with multiple elements. Have you considered using querySelectorAll instead? That way, you can target all elements that share the same class. Speaking of fun distractions, if you enjoy retro games, you might want to check out Retro Bowl for a little break!