Javascript Content Popup Button - PullRequest
Новая
       6

Javascript Content Popup Button

1 голос
/ 02 марта 2020

Я пытаюсь сделать несколько всплывающих кнопок, используя одну и ту же функцию javascript. Сетка 2х2. Это ребенок-сетка. каждый дочерний элемент сетки предназначен для кнопки. Когда нажимаются кнопки, я хочу, чтобы содержимое между соответствующими элементами 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)

Как исправить это?

Ответы [ 2 ]

1 голос
/ 02 марта 2020

querySelectorAll возвращает список узлов, поэтому переключение больше не доступно. Вы должны пройтись по каждому элементу в вашем списке и вызвать переключатель. - То же самое для всплывающих окон. Пример: 

  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 см. Приведенные примеры.

0 голосов
/ 02 марта 2020

Использование классов лучше для нескольких элементов: 

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