querySelectorAll返回一个节点列表，因此切换不再可用。您应该遍历列表中的每个元素并调用toggle。-弹出窗口也是如此。示例：
我正在尝试使用相同的javascript函数制作多个弹出按钮。是一个2x2网格。是网格子级。每个网格子对象都是一个按钮。单击按钮时，我希望相应div(，(之间的内容以这种方式显示：https://codepen.io/keaux/pen/zYGzENG
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更改为：
function toggle()
{
var button = document.querySelectorAll("#button1,#button2");
button.classList.toggle('active');
var popup = document.querySelectorAll("#popup1,#popup2");
popup.classList.toggle('active');
}
现在我在javascript的第二行出现了一个错误，上面写着：
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'); });
文件-https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll请参阅提供的示例。
使用类对多个元素更好：
document.querySelectorAll(".button a").forEach((a)=>{a.addEventListener("click",toggle);});
document.querySelectorAll(".popup a:last-child").forEach((a)=>{a.addEventListener("click",close);});
function toggle(){
this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}
function close(){
this.parentElement.classList.toggle("active"); // .popup
}.popup{
display: none;
}
.active{
display: block;
}<div class="container">
<div class="box button">
<a href="#">HURRICANE TRACK</a>
</div>
<div class="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="#">CLOSE</a>
</div>
<div class="box button">
<a href="#">NINE MEN'S MORRIS</a>
</div>
<div class="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="#">CLOSE</a>
</div>