javascript - 在 HTML 中移动 .js 函数中的按钮
问题描述
我一直在尝试解决这个问题并在谷歌上搜索了 2 天,但没有成功,所以如果它非常基本,请耐心等待。我还在学习。
我按照教程为我正在试验的 HTML 网站编写了一个猜数字游戏。
除了一件事之外,一切都像它应该的那样工作 - 游戏“重置游戏”按钮出现在网站的末尾,而不是其他元素出现在游戏中的位置。
我尝试了很多事情,以至于我什至不记得我尝试过什么,因此我需要一些帮助。
编辑这里的图片:蓝色圆圈显示它弹出的位置,蓝色 X 标记我想要它的位置。
这是代码的 HTML 部分:
<!-- GUESSING GAME -->
<div class="wrapper2">
<div class="form"></div>
<center><label for="guessField">Enter a guess: </label>
<input type="number" id="guessField" class="guessField">
<input type="submit" value="Guess" class="guessSubmit"></center>
The game has generated a number between 1 - 100 which you must guess!
You have 10 guesses and the game will let you know if your guess is either too high or too low!
<strong><em>Good luck!</em></strong>
<!-- FORM + RESULTPARAS CLASSES -->
<div class="resultParas">
<p class="guesses">
<p class="lastResult">
<p class="lowOrHi"></div>
<script src="GuessGame.js" charset="utf-8"> </script></div>
<!-- FORM + RESULTPARAS CLASSES -->
</center>
<div class ="footer"></div>
<div class="container"></div>
<div class="column"></div>
<h4> MY LINKS </h4>
<a href="https://www.facebook.com">FACEBOOK</a><br>
<a href=mailto:example@gmail.com>EMAIL</a>
<h4><span> MY STORY </span></h4>
<p> Hi there! I'm learning how to make cool websites!</p>
<!-- THIS IS WHERE THE RESTART GAME BUTTON APPEARS! -->
</body>
</html>
下面是 .js 源文件代码:
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = 'Previous guesses: '; }
//
guesses.textContent += userGuess + ' ';
//
if (userGuess === randomNumber) {
lastResult.textContent = "Congratulations! You got it right!";
lastResult.style.backgroundColor = "green";
lowOrHi.textContent = " ";
setGameOver(); }
else if (guessCount === 10 ) {
lastResult.textContent = "GAME OVER!";
lowOrHi.textContent = " ";
setGameOver(); }
else {
lastResult.textContent = "Wrong!";
lastResult.style.backgroundColor = "red";
if (userGuess > randomNumber) {
lowOrHi.textContent = "TOO HIGH!"; }
else if (userGuess < randomNumber) {
lowOrHi.textContent = "TOO LOW!"; }
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for(let i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = ''; }
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
我确信有一个简单的解决方法,但我无法解决它。
非常感谢!
解决方案
我不确定您要做什么,但是您的 html 代码存在一些问题,尤其是结束标签。我在这里为你创建了一个小提琴链接,看看你的 html 结构错误。
即标题标签-
<html>
<header>
<script type="javascript" src="GuessGame.js" charset="utf-8"> </script>
</header>
<body>
更新
好的,现在我想我有你的问题。正如您在调试器中看到的(浏览器上的 F12),这是您的问题-
Uncaught ReferenceError: resetGames is not defined
你没有声明这个变量,所以你所要做的就是删除这一行,它会起作用。代替-
resetGames.addEventListener('click', resetGame);
guessSubmit.addEventListener('click', checkGuess);
只需添加 // 用于对调试器说从这一行开始。
// resetGames.addEventListener('click', resetGame);
guessSubmit.addEventListener('click', checkGuess);
更新 2
首先,请注意,此代码不是作为最佳实践编写的,您正在构建动态 html,您可以在其中隐藏和显示它。
第二,现在更清楚了。而不是这个代码-
document.body.appendChild(resetButton);
在 DOM 末尾实际附加按钮的位置,您所要做的就是将其附加到类“lowOrHi”。
document.querySelector('.lowOrHi').appendChild(resetButton);
推荐阅读
- java - vaadin FileDownloader 重置扩展
- java - Java:在保持顺序的同时并行过滤大型文本文件
- html - 变换比例并调整外部内容
- python - Python goslate 可能的防火墙问题
- jquery - 在 document.ready 上触发一个 jQuery 函数
- javascript - 突出显示文本的文本到语音
- sql-server - SQL Server - 将逻辑表达式的结果转换为 BIT/INT
- arrays - 在 PHP 中显示 JSON 天气 API 响应
- javascript - 如何在我的页面上永久禁用 Google Analytics 跟踪?
- javascript - 如果检查输入,则将类添加到 HTML 元素