Применение функции Javascript к нескольким кнопкам?

Question

Я пытаюсь применить функцию javascript к нескольким кнопкам, где всплывает видео с описанием. Одна кнопка работает, а другая нет. Я попытался использовать "onclick", и есть всплывающее окно, однако вместо этого отображается содержимое первой кнопки. javascript связан в отдельном файле "popup. js".

HTML:

<div class="container">
    <div class="box" id="button">
        <a href="#" id="open">HURRICANE TRACK</a>
    </div>
    <div id="popup">
        <h2>HURRICANE TRACKING</h2>
        <video src="python_movies/hurricanetrack.mov" controls></video>
        <p>
            A Python project that prompts the user for a file containing hurricane information in order to form a
            dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the
            correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind
            speed. The program graphs all of the corresponding information by adding the information on a table,
            graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind
            speed.
        </p>
        <a href="#" id="close">CLOSE</a>
    </div>

    <div class="box" id="button">
        <a href="#" id="open">NINE MEN'S MORRIS</a>
    </div>
    <div id="popup">
        <h2>NINE MEN'S MORRIS</h2>
        <video src="python_movies/ninemensmorris.mov" controls></video>
        <p>
            A Python Projects that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that
            combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four
            intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men
            lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player
            wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to
            win), or by leaving them without a legal move. The game proceeds in three phases:
        </p>
        <ul>
            <li>Placing pieces on vacant points</li>
            <li>Moving pieces to adjacent points</li>
            <li>(optional phase) Moving pieces to any vacant point when the player has been reduced to three men
            </li>
        </ul>
        <a href="#" id="close">CLOSE</a>
    </div>
</div>
<script src="js/popup.js"></script>

JavaScript:

function toggle() {
  var blur = document.getElementById('button');
  blur.classList.toggle('active');
  var popup = document.getElementById('popup');
  popup.classList.toggle('active');
}

document.querySelector("#open").onclick = toggle;
document.querySelector("#close").onclick = toggle;

Answer 1

id должен быть уникальным во всем документе. Вы можете использовать class или другой атрибут для выбора нескольких узлов.

// listener function
function handle_button_click() {
  console.log(this.innerText);
}

// add click events using `class`
const buttons = document.querySelectorAll('.button');
for (const button of buttons) {
  button.addEventListener('click', handle_button_click, false);
}

<button class="button">Button 1</button>
<button class="button">Button 2</button>

Обновление

Для всплывающего окна это было бы идеально,

function handle_button_click() {
  const popups = document.querySelectorAll('.popup');
  const buttons = document.querySelectorAll('.button');

  popups.forEach(p => p.classList.remove('open'));
  buttons.forEach(b => b.classList.remove('active'));

  const popup = document.querySelector(this.dataset.popup);
  if (!popup) return;

  popup.classList.add('open');
  this.classList.add('active');
}

const buttons = document.querySelectorAll('.button');
for (const button of buttons) {
  button.addEventListener('click', handle_button_click, false);
}

.popup {
  display: none;
}

.open {
  display: block;
}

.active {
  color: cadetblue;
}

<button class="button" data-popup="#popup1">Button 1</button>
<button class="button" data-popup="#popup2">Button 2</button>

<div class="popup" id="popup1">Popup 1</div>
<div class="popup" id="popup2">Popup 2</div>

Answer 2

Попробуйте этот код вместо всех JavaScript код:

$(function(){
    $('#button, #popup').click(function(){
        $('#button, #popup').removeClass('active');
        $(this).addClass('active');
    });
});