如何使用 JavaScript 中的按钮重新加载 Web 页面

Question

我目前正在使用 JavaScript 操作开发 gitHub 对战游戏。 请问，我怎样才能让“PLAY AGAIN”按钮重新开始游戏。 （从头再来）

我还想让“DIV WITH CONTROL-BUTTON ID”仅在从 API 获取数据成功时才显示为块......谢谢

我的代码如下：

 "use strict"; let user = document.getElementsByClassName('github-username'), player1 = document.getElementById('player-one'), player2 = document.getElementById('player-two'), form1 = document.getElementById('form1'), form2 = document.getElementById('form2'), cont1 = document.getElementById('continue1'), cont2 = document.getElementById('continue2'), reSelect = document.getElementById('reselect-players'), playAgain = document.getElementById('play-again'), initiate = document.getElementById('initiate-battle'); // Function that activate the start button function getStarted() { let startPage = document.getElementById('startPage'), startBtn = document.getElementById('get-started-button'); startBtn.onclick = function() { startPage.style.display = "none"; player1.style.display = "block"; }; }; getStarted(); // Function that initiates player 1 input function firstForm() { player1.style.display = "none"; player2.style.display = "block"; return false; }; // Function that initiates player 2 input function secondForm() { let confirmPage = document.getElementById('confirm-page'); player2.style.display = "none"; confirmPage.style.display = "block"; // Function that fetches users data from input function fetchUsers() { let user1, user2; fetch("https://api.github.com/users/" + user[0].value).then(function(response) { return response.json(); }).then(function(data) { // Log the data to the console console.log(data); // Cache the data to a variable user1 = data; let myUser1 = document.getElementById('user1-container'), totalScore = (1 * user1.followers + 1 * user1.following + 0.5 * user1.public_repos); myUser1.innerHTML = `<ul class="user-info"> <p id="firstPlayer"> Player 1 </p> <li id="score">Score: <span class="totalScr"> ${totalScore}</span> </li> <li><img class="avatar" src="${user1.avatar_url}"></li> <li>Name: ${user1.name} </li> <li>Username: ${user1.login} </li> <li>Following: ${user1.following} </li> <li>Followers: ${user1.followers} </li> <li>Repository: ${user1.public_repos} </li> </ul>`; //Make another API call and pass it into the stream return fetch("https://api.github.com/users/" + user[1].value).then(function(response) { //Get a JSON object from the response return response.json(); }) }).then(function(data) { //Log the data to the console console.log(data); // Cache the data to a variable user2 = data; //Now that you have both APIs back, you can do something with the data let myUser2 = document.getElementById('user2-container'), totalScore2 = (1 * user2.followers + 1 * user2.following + 0.5 * user2.public_repos); myUser2.innerHTML = `<ul class="user-info"> <p id="secondPlayer"> Player 2 </p> <li id="score2">Score: <span class="totalScr"> ${totalScore2}</span> </li> <li><img class="avatar" src="${user2.avatar_url}"></li> <li>Name: ${user2.name} </li> <li>Username: ${user2.login} </li> <li>Following: ${user2.following} </li> <li>Followers: ${user2.followers} </li> <li>Repository: ${user2.public_repos} </li> </ul>`; }) }; fetchUsers(); setTimeout(function() { document.getElementById('control-buttons').style.display = "block"; playAgain.style.display = "none"; }, 1500); return false; }; //Function that assign users score and winner initiate.onclick = function() { document.getElementById("confirm-players").innerHTML = "Winner"; document.getElementById('score').style.display = "block"; document.getElementById('score2').style.display = "block"; initiate.style.display = "none"; reSelect.style.display = "none"; playAgain.style.display = "block"; let totalScr = document.getElementsByClassName("totalScr"), totalScr1 = parseFloat(totalScr[0].innerText), totalScr2 = parseFloat(totalScr[1].innerText); if (totalScr1 > totalScr2) { document.getElementById("firstPlayer").innerHTML = "Winner"; document.getElementById("secondPlayer").innerHTML = "Loser"; } else if (totalScr1 < totalScr2) { document.getElementById("firstPlayer").innerHTML = "Loser"; document.getElementById("secondPlayer").innerHTML = "Winner"; } else { confirm("IT'S A TIE, PLAY AGAIN"); }; }; reSelect.onclick = function() { confirmPage.style.display = "none"; player1.style.display = "block"; user[0].value = null; user[1].value = null; }; playAgain.onclick = function() { //Make this function start the game again, following the usual pattern };

 body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, cursive; background-image: url('images/photo.jpg'); background-size: 100%; background-repeat: no-repeat; } input[type=text] { -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); border: 1px solid #999; margin: 50px 0 15px; }.body-container { margin: 0; text-align: center; }.body-container p { font-size: 16px; padding-bottom: 5px; }.head-text { padding-top: 60px; margin-bottom: -10px; font-size: 36px; } #confirm-players { font-size: 30px; margin: 10px 0 5px; } #get-started-button { font-size: 18px; font-weight: 10%; border: none; width: 150px; word-spacing: 2px; border-radius: 5px; height: 40px; background-color: green; color: white }.continue-button { font-size: 18px; word-spacing: 2px; border: none; width: 200px; border-radius: 5px; height: 40px; background-color: green; color: white } #get-started-button:hover, .continue-button:hover, #initiate-battle:hover { background-color: darkgreen; }.github-username { width: 65%; height: 35px; padding: 10px; margin: 20px 0 15px; } #score, #score2 { font-size: 18px; font-weight: bolder; display: none; text-align: center; } #player-one, #player-two { display: none; } #confirm-page, #winner { display: none; margin: 20px 0 10px; } #initiate-battle, #play-again { font-size: 18px; border: none; width: 200px; border-radius: 5px; word-spacing: 2px; letter-spacing: 0.4px; height: 40px; background-color: green; color: white; margin: 15px auto 5px; } #reselect-players { font-size: 18px; border: none; word-spacing: 2px; letter-spacing: 0.4px; width: 240px; border-radius: 5px; height: 35px; background-color: cornflowerblue; color: white; margin: 10px auto; } #control-buttons { display: none; } #reselect-players:hover { background-color: darkslateblue; }.avatar { border-radius: 50%; height: 200px; width: 200px; }.myUsers { display: inline-block; margin: 0 5px 0 10px; } ul { margin-left: -30px; } li { list-style: none; padding: 5px; text-align: left; border: 1px solid grey; } #firstPlayer, #secondPlayer { margin-bottom: 0; }

 <DOCTYPE, html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="githstyle;css" type="text/css"> </head> <body> <div id="startPage" class="body-container"> <h1 class="head-text">GitHub Challenge</h1> <p>Some challenges are worth engaging </p> <button id="get-started-button">Get Started</button> </div> <div id="player-one" class="body-container"> <h1 class="head-text">Player One</h1> <div class="form-container"> <form id="form1" onsubmit="return firstForm()."> <div> <input type="text" class="github-username" placeholder="Enter Player's GitHub Username" required> </div> <div> <input type="submit" value="Continue" id="continue1" class="continue-button"> </div> </form> </div> </div> <div id="player-two" class="body-container"> <h1 class="head-text">Player Two</h1> <div class="form-container"> <form id="form2" onsubmit="return secondForm()"> <div> <input type="text" name="" class="github-username" placeholder="GitHub Username" required> </div> <div> <input type="submit" value="Continue" id="continue1" class="continue-button"> </div> </form> </div> </div> <div id="confirm-page" class="body-container"> <h1 id="confirm-players">Confirm players</h1> <div id="user1-container" class="myUsers"> </div> <div id="user2-container" class="myUsers"> </div> <div id="control-buttons"> <div> <button id="initiate-battle">Initiate Battle</button> </div> <div> <button id="reselect-players">Reselect Players</button> </div> <div> <button id="play-again">Play Again</button> </div> </div> </div> <script src="gith.js" type="text/javascript"> </script> </body> </html>

Answer 1

使用 JavaScript 重新加载页面非常简单。

您可以通过使用location.reload()来实现

如果你想用button实现重载，那么一定要加一个return false; 在您调用location.reload()以防止冒泡之后（按钮的父母不会知道事件发生）。

因此，您的代码将如下所示：

document.getElementById('yourButton').addEventListener('click', function(){

        location.reload();
        return false;

    });

希望这可以帮助： ：）