Javascript内容弹出按钮

我正在尝试使用相同的javascript函数创建多个弹出按钮。这是一个2x2的网格。这是一个网格子对象。每个网格子项都是一个按钮。单击按钮时，我希望相应div（，）之间的内容以这种方式显示：

HTML

<div class="container">

        <div class="box" id="button1">
            <a href="#" onclick="toggle()">HURRICANE TRACK</a>
        </div>
        <div id="popup1">
            <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="#" onclick="toggle()">CLOSE</a>
        </div>

        <div class="box" id="button2">
            <a href="#" onclick="toggle()">NINE MEN'S MORRIS</a>
        </div>
        <div id="popup2">
            <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="#" onclick="toggle()">CLOSE</a>
        </div>

现在，我的javascript第二行出现了一个错误，上面说：

popup.js:5 Uncaught TypeError: Cannot read property 'toggle' of undefined
at toggle (popup.js:5)
at HTMLAnchorElement.onclick (VM1916 codingprojects.html:20)

---

如何修复此问题？

queryselector all返回节点列表，因此切换不再可用。您应该遍历列表中的每个元素并调用toggle。-弹出窗口也一样。 例如：

---

文档-请参阅提供的示例。

对于多个元素，使用类更好：

document.queryselectoral（.button a”）.forEach（（a）=>{a.addEventListener（“单击”，切换）；}）；
document.queryselectoral（.popup a:last child”）.forEach（（a）=>{a.addEventListener（“单击”，关闭）；}）；
函数切换（）{
this.parentElement.nextElementSibling.classList.toggle（“active”）；//弹出窗口是a的父元素的同级
}
函数关闭（）{
此.parentElement.classList.toggle（“活动”）；/.popup
}

.popup{
显示：无；
}
.主动{
显示：块；
}

飓风追踪

一个Python项目，提示用户输入一个包含飓风信息的文件，以便形成一个字典，其中包含飓风的名称、飓风发生的年份以及每个飓风的相应编码数据，包括轨迹、经度、纬度和风速。该程序通过在表格上添加信息、绘制飓风的轨迹以及根据风速在图表中绘制信息来绘制所有相应的信息。

九男子莫里斯

运行游戏的Python项目，九人莫里斯。Nine Men's Morris是一款两人游戏，结合了井字游戏和跳棋的元素。电路板由24个交点或点组成的网格组成。每个选手有九个棋子。玩家试图组成“磨坊”——三名自己的人水平或垂直排列，允许玩家将对手的人移出游戏。玩家通过将对手减少为两个棋子（在这两个棋子中，他们无法再形成磨坊，因此无法获胜）或在没有合法移动的情况下离开他们来获胜。游戏分三个阶段进行：


在空位上放置碎片
将工件移动到相邻点
（可选阶段）当玩家减少到三人时，将棋子移动到任何空位

我是否需要将类从“box”更改为“box button？”是的，或者将javascript代码更改为

querySelectorAll（“.box a”）

这非常有用。非常感谢。

popup.js:5 Uncaught TypeError: Cannot read property 'toggle' of undefined
at toggle (popup.js:5)
at HTMLAnchorElement.onclick (VM1916 codingprojects.html:20)

  var buttons = document.querySelectorAll("#button1,#button2");
  buttons.forEach(function(btn){ btn.classList.toggle('active'); });