如何重定向到html页面?我的onclick没有开火

所以我有一个start.html，它允许您选择要玩的玩家数量，并将他们的名字添加到输入中。我试图获取输入并将其放入索引寻呼机的innerHTML中，用户可以在这里选择真相或敢于开始游戏。按钮点击btnStart拒绝切换到index.html.

这是我的游戏.js

function readyPlayer(){
var input1 = document.getElementById("player1Name");
sessionStorage.setItem("player1", input1.value());
var player1Text = sessionStorage.getItem("player1");
document.getElementById('playerText').innerHTML = player1Text + ", you're up!";
location.href = 'index.html';

}

这是我的start.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Truth or Dare</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div style="font-size: 20px;">
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background: rgb(4,2,2);">
<div class="container"><a class="navbar-brand" href="#" style="border-color: rgb(10,10,10);color: rgb(247,242,242);">Truth or Dare</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
<h1 class="text-center" style="margin-top: 100px;">How many players are going to play?</h1>
<div class="text-center" style="height: 50px;padding-top: 0px;margin: 0;margin-top: 50px;border-style: none;">
<button id="btn1" onclick="select1Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(7,1,1);border-style: none;">1</button>
<button id="btn2" onclick="select2Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(8,12,16);margin-left: 40px;border-style: none;">2</button>
<button id="btn3" onclick="select3Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(8,12,16);margin-left: 40px;border-style: none;">3</button>
<button id="btn4" onclick="select4Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(8,12,16);margin-left: 40px;border-style: none;">4</button>
</div>
<div style="height: 50px;">
<h1 id="playerText" class="text-center" style="font-size: 30px;margin-top: 30px;display:none;">Enter the player's name(s)</h1>
</div>
<div id="player1Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="text-center d-inline-block" style="margin-right: 15px;display:none;">Player 1:</h3>
<input id="player1Name" type="text"></div>
<div id="player2Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="d-inline-block" style="margin-right: 15px;">Player 2:</h3>
<input id="player2Name" type="text"></div>
<div id="player3Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="d-inline-block" style="margin-right: 15px;">Player 3:</h3>
<input id="player3Name" type="text"></div>
<div id="player4Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="d-inline-block" style="margin-right: 15px;">Player 4:</h3>
<input id="player4Name" type="text"></div>
<div id="divStart" class="text-center" style="height: 50px; margin-top: 1px;display:none;">
<input id="btnStart" onclick="readyPlayer();" type="button" value="Start" class="btn btn-primary" style="height: 50px;width: 150px;background: rgb(8,12,16);margin-left: 40px;border-style: none;"></input>
</div>
<script src="player.js"></script>
<script src="play.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

这是我的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Truth or Dare</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background: rgb(4,2,2);">
<div class="container"><a class="navbar-brand" href="#" style="border-color: rgb(10,10,10);color: rgb(247,242,242);">Truth or Dare</a>
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
<!-- Buttons for selecting truth or dare OnClick -->
<h1 class="text-center" style="margin-top: 150px;">Player, you're up!</h1>
<div class="text-center" onclick="location.href='truth.html'" style="height: 50px;padding-top: 0px;margin-top: 50px;">
<button class="btn btn-primary" type="button" style="height: 50px;width: 230px;background: rgb(8,12,16);">TRUTH</button>
</div>
<div style="height: 50px;">
<h1 class="text-center">or</h1>
</div>
<div class="text-center" onclick="location.href='dare.html'" style="height: 50px;margin-top: 5px;">
<button class="btn btn-primary" type="button" style="height: 50px;width: 230px;background: rgb(7,1,1);">DARE</button>
</div>
<script src="player.js"></script>
<script src="play.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

您可以使用：使其工作

location.href = '/index.html';
// or
window.location.href = '/index.html';

而不是：

location.href = 'index.html';

这可能与它是一条相对路线有关？

以上回复确实回答了这个问题，只要JavaScript出现任何问题，请首先检查控制台是否存在JavaScript中的任何明显错误(浏览器兼容性问题(
在过去的侧边栏方法中，当我遇到java脚本问题时，我添加了一个锚标记<a href，而不是按钮(将锚的样式更改为类似按钮(。如果它能帮助别人

最好的方法是将其作为变量存储在URL中，但您似乎在使用本地文件，所以我不能100%确定这是否有效。

我能想到的下一种方式是蛋糕——不，饼干。以下是一些直接从w3schools复制粘贴的重要代码片段https://www.w3schools.com/js/js_cookies.asp。我没有创建任何代码

//This returns a cookie with the name equal to the parameter cname
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}


//sets a cookie named the first parameter with the value of the second parameter lasting the third parameter long
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

相关内容

最新更新

热门标签：