将 Javascript 函数应用于多个按钮？

Question

I am trying to apply a javascript function to multiple buttons where a video with a description pops up. One button is working, but the other isn't. I tried using "onclick" and there's a popup, however, it shows the content of the first button instead. The javascript is linked in a separate file, "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

The id must be unique in the whole document. You can use class or different attribute to select multiple nodes.

 // 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>

Update

For a popup, this would be perfect,

 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

Try this code instead of all JavaScript code:

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