[英]Trigger function on click for hangman game
I'm new to JavaScript and have been trying to code up this Hangman game, but am running into issues. 我是JavaScript的新手,一直试图编写这个Hangman游戏的代码,但我遇到了问题。 What I have to far is the following: 我所要做的就是以下内容:
My HTML: 我的HTML:
<div class="col-md-4">
<div id="placeHolder">_ _ _ _ _ _</div>
<div id="gamestatus"></div>
<input type="text" size="1" id="letterGuess" maxlength="1">
<button id="button" onclick="guess()">Press to start</button>
</div>
My JavaScript: 我的JavaScript:
var dictionary = ['music', 'mountain', 'forest', 'florida', 'sweden', 'golf'];
var wordUsed, input, placeHolder;
function startGame()
{
placeHolder = "";
var totalGuesses = 10;
wordUsed = dictionary[Math.floor(Math.random() * dictionary.length)];
console.log(wordUsed);
var buttonText = document.getElementById("button").innerHTML = "Guess";
for(var i = 0; i < wordUsed.length; i++)
{
placeHolder += "_ ";
}
document.getElementById("placeHolder").innerHTML = placeHolder;
document.getElementById("gamestatus").innerHTML = "Game is in progress.";
}
function guess()
{
var correctGuess = false;
var ip = document.getElementById("letterGuess");
input = ip.value;
for(var i = 0; i < wordUsed.length; i++)
{
if(input == wordUsed.substring(i, i + 1))
{
correctGuess = true;
placeHolder = placeHolder.substring(0, i) + input + placeHolder.substring(i + 1, placeHolder.length + 1);
document.getElementById("placeHolder").innerHTML = placeHolder;
}
}
if(!correctGuess)
{
totalGuesses--;
}
if(placeHolder == wordUsed)
{
alert("You WIN!");
}
if(totalGuesses == 0)
{
alert("You LOSE!")
startGame();
}
}
startGame();
document.getElementById("button").onclick = guess;
So the code is correctly selecting a word and placing the correct amount of underscores in places of the letters; 所以代码正确地选择一个单词并在字母的位置放置正确数量的下划线; but nothing happens when I run my code. 但是当我运行我的代码时没有任何反应。 I might've over-looked something really simple and would really appreciate if someone could point out what is wrong with the code/logic. 我可能已经过度看了一些非常简单的东西,如果有人能指出代码/逻辑有什么问题,我会非常感激。
Also, any other tips on how to improve the code/logic will be appreciated! 此外,任何其他关于如何改进代码/逻辑的技巧将不胜感激! Thanks. 谢谢。
The last line in your code: 代码中的最后一行:
document.getElementById("button").onclick = letterGuess;
You have not declared letterGuess()
as a function. 您尚未将letterGuess()
声明为函数。 You probably want something like this: 你可能想要这样的东西:
document.getElementById("button").addEventListener("click", guess);
This will execute your guess()
function on every click on the Button. 这将在Button上的每次单击时执行guess()
函数。 In addition you can/should remove the onclick=""
attribute from the <button>
此外,您可以/应该从<button>
删除onclick=""
属性
Here is a jsfiddle that works. 这是一个有效的jsfiddle 。 Is your html set up correctly and do you actually load the script? 你的html设置是否正确,你真的加载脚本吗?
Your html should look something like this: 你的HTML应该是这样的:
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- your game html -->
<script type="text/javascript" src="game.js"></script>
</body>
</html>
If letterGuess
was just a typo, please console.log()
something in your guess()
function, to make sure it's being executed after clicking the button. 如果letterGuess
只是一个拼写错误,请在你的guess()
函数中letterGuess
console.log()
,以确保在点击按钮后执行它。
You do not have a function called letterGuess
, but you're calling it on click. 你没有一个名为letterGuess
的函数,但是你在点击时调用它。 Changing that call to guess
will get you somewhere 将该调用改为guess
会让你到达某个地方
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.