我无法使用Javascript从HTML访问元素
我无法使用Javascript从HTML访问元素
提问于 2019-03-20 04:04:03
我想创建一个使用颜色的项目。
我所有的文件都在同一个文件夹里。
我无法通过以下方式访问index.html中的我的颜色输入：
const firstColor = document.getElementById("color1").value;我只能到达game.js中的元素。
另外，我的画布在game.html中。
我已经在我所有的HTML文件中添加了标签。
我的index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body align="center">
<div id="title">Cyber Bird</div>
<div id="mainMenu">
<div id="selectColors">
<div id="colorsTitle">SELECT <span>2</span> COLORS FOR YOUR <span id="cb">CYBER BIRD</span></div> <br> <hr> <br>
<span id="first"> First: <input type="color" name="color1" id="color1" value="#f1aabc"></span>
<span id="second"> Second: <input type="color" name="color2" id="color2" value="#2d96b9"></span>
</div>
<a href="game.html" class="button" id="startCyber">START</a>
</div>
<script src="src/game.js"></script>
</body>
</html>我的game.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container" align="center">
<div id="scoreBoard">
<div id="header">SCOREBOARD</div>
<div id="description">Score: </div>
<div id="score">0</div>
</div>
<canvas id="myCanvas" height="500" width="900"></canvas>
<div class="helper" id="toJump">press <span>SPACE</span> to jump</div>
<div class="helper" id="toStart">click <span onclick="startGame()">HERE</span> to start</div>
<div class="helper" id="toSelect">select new <span><a href="index.html">COLORS</a></span></div>
</div>
<div id="darken"></div>
<div id="gameOver" align="center">
<div id="message">GAME OVER</div>
<div id="yourScore">Your score is: <span id="finalScore"></span></div>
<div id="tryAgain" class="button" onclick="startGame()">Try Again</div>
</div>
<script src="game.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-20 04:27:00
您没有将数据从index.html传递到game.html。所以当你调用这个的时候：
<a href="game.html" class="button" id="startCyber">START</a>
您正在加载一个新页面，这将删除所有现有的变量-包括'color1‘。
我在这里看到了两个选项：
- 使其成为单页面web应用程序。所以当你点击开始按钮时，它会隐藏索引目录并加载一个游戏目录
- 将你的值从index.html保存到某个地方(浏览器存储？)然后在加载新的game.html页面后调用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55249162
复制相关文章
相似问题