Запустите одно и то же действие с двумя идентификаторами

Question

У меня есть модал, который я хотел бы вызвать двумя кнопками с разными идентификаторами.Причина в том, что одна кнопка отображается на рабочем столе, а другая - в мобильном (отзывчивая).display: none выполняет два раза один и тот же идентификатор.

Модал:

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="closecross">&times;</span>
    <!-- Modal content -->
    <div class="modal-content">
        <p>Content</p>
    </div>
</div>

Модал как JS:

// Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("closecross")[0];

    // When the user clicks the button, open the modal
        btn.onclick = function() {
            modal.style.display = "block";
        }

    // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    };

Мои две кнопки:

<div class="insertClass" id="myBtnMobile">Modal</div>

И

<div class="insertClass" id="myBtn">Modal</div>

Я пытался использовать getElementsByClassName('.myBtnMobile','.myBtn'), но он не работает с моим JS.

Я использую код от https://www.w3schools.com/howto/howto_css_modals.asp только для того, чтобы предоставить потенциальную игровую площадку.

Заранее спасибо!

Answer 1

Рабочая скрипка

Вы можете использовать queryselectorAll():

var divs = document.querySelectorAll('#myBtnMobile,#myBtn');

divs.forEach(function(div) {
  div.addEventListener("click", clickEvent);
});

function clickEvent() {
  console.log('Div ' + this.id + ' Clicked');
}

<div id="myBtnMobile">Modal</div>
<div id="myBtn">Modal</div>

Answer 2

Вам нужен доступ к классу, а не к идентификаторам:

document.getElementsByClassName("insertClass");

Answer 3

Вы можете просто использовать это:

<div class="insertClass" id="myBtnMobile" onclick="yourfunction()">Modal</div>
<div class="insertClass" id="myBtn" onclick="yourfunction()">Modal</div>

или

document.getElementById("myBtnMobile").addEventListener("click", yourfunction);
document.getElementById("myBtn").addEventListener("click", yourfunction);

Или используйте

<button class="...">

не

<button id="...">.

Oneболее возможное решение:

var buttons = document.getElementsByClassName('insertClass');
for (var i = 0; i < buttons.length; i++)
{
    buttons[i].onclick = function() {
        document.getElementById('myModal').style.display = 'block';
    }
}

https://jsfiddle.net/43gkcm92/24/

Answer 4

Вы можете таким образом вызвать два ID с тем же действием

$('#myBtnMobile,#myBtn').click(function () {
      // your logic
});