[英]Coin Flip Game JS/HTML
I'm trying to create a coin flip game, with a button for both guessing heads and tails with appropriate outputs for the guess - you guessed x, and the answer is x, you're correct/you guessed x and the answer is y, you're incorrect.我正在尝试创建一个掷硬币游戏,带有一个用于猜测正面和反面的按钮,并带有适当的猜测输出 - 你猜对了 x,答案是 x,你是正确的/你猜对了 x,答案是 y ,你错了。 I'm new to JS, and I'm struggling to find out why I'm not having results for the game when buttons are clicked.
我是 JS 的新手,我正在努力找出为什么单击按钮时我没有获得游戏结果。
document.getElementById('flipHeads').onclick = click; var flipHeads = Math.round(Math.random()) + 1; function click(flipHeads) { if (coinFlip == 1) { var Result = "flipHeads"; } else { var Result = "flipTails"; } if (Result == flipHeads) { if (Result == "heads") { alert("The flip was heads and you chose heads...you win!"); } else { alert("The flip was tails and you chose heads...you lose!"); } } } document.getElementById('flipTails').onclick = click; function click(flipTails) { var flipTails = Math.round(Math.random()) + 1; if (Result == fliptails) { alert("The flip was heads and you chose tails...you lose!"); } else { alert("The flip was tails and you chose tails...you win!"); } } function flip(flipHeads) { document.getElementById("result").innerHTML = Heads; }; function flip(flipTails) { document.getElementById("result").innerHTML = Tails; };
<div> <button id="flipHeads" type="button">Heads</button> <button id="flipTails" type="button">Tails</button> <div id="result"></div> </div>
I simplified your code and made it actually work.我简化了您的代码并使其真正起作用。 I will go step by step through the changes:
我将逐步完成更改:
div
and ID (flip).div
和 ID(翻转)。 Then I changed the ID of the button to just Heads
or Tails
.Heads
或Tails
。eventListener
that looks for a click event within the div id="flip"
div id="flip"
中查找点击事件的eventListener
button
and not the containing element itself.button
而不是包含元素本身。Heads
or Tails
Heads
或Tails
Heads
or Tails
Heads
或Tails
的结果 /* checks for a click event within the div id="flip" */ const onClick = (event) => { /* checks if a button was clicked */ if (event.target.nodeName === 'BUTTON') { /* gets the ID of the clicked button as string */ var choice = event.target.id; /* Array to roll between different strings over then a number */ var roll = [ 'Heads', 'Tails' ]; var flip = roll[Math.floor(Math.random() * roll.length)]; /* checks if the flip and the pick is the same */ if (choice == flip) { var result = ' ...you win!'; } else { var result = ' ...you lose!'; } /* outputs the result */ alert('The flip was ' + flip + ' and you chose ' + choice + result); } } document.querySelector('#flip').addEventListener('click', onClick);
<div id="flip"> <button id="Heads" type="button">Heads</button> <button id="Tails" type="button">Tails</button> <div id="result"></div> </div>
There are several errors you've made in the code;您在代码中犯了几个错误; here are some of them that I could find, but there are more:
以下是我能找到的一些,但还有更多:
document.getElementById(
[element] ).onClick = click
won't work - there should be parentheses after click
( click()
) document.getElementById(
[element] ).onClick = click
不起作用 - 点击后应该有括号( click
click()
)if (Results == fliptails)
, you misspelled the flipTails
variable as fliptails
.if (Results == fliptails)
中,您将flipTails
变量拼错为fliptails
。document.getElementById("result").innerHTML = Heads
tries to set the innerHTML
of the results element to be equal to the variable Heads
, which doesn't exist.document.getElementById("result").innerHTML = Heads
尝试将结果元素的innerHTML
设置为等于不存在的变量Heads
。 You should wrap it in quotes (ie "Heads"
), to set the innerHTML to the string "Heads"."Heads"
),以将 innerHTML 设置为字符串 "Heads"。 Likewise with [...] = Tails
.[...] = Tails
。 There's also quite a bit of confusion here, and in general the code is quite hard to salvage.这里也有相当多的混乱,通常代码很难挽救。 Thankfully however, there's a much more efficient way of accomplishing your goal.
然而,值得庆幸的是,有一种更有效的方法可以实现您的目标。 Here's an example of functional, more efficient code for this - which I'll walk through:
这是一个功能更有效的代码示例 - 我将逐步介绍:
function flip(guess) { let sideLandedOn = Math.round(Math.random()) == 0 ? 'heads' : 'tails'; // "flip" coin document.getElementById("result").innerHTML = sideLandedOn; // set innerHTML of results element to side that coin landed on if (guess == sideLandedOn) { alert(`The coin landed on ${sideLandedOn} and you guessed ${guess}... you win!`); // alert user won } else { alert(`The coin landed on ${sideLandedOn} and you guessed ${guess}... you lose!`); // alert user lost } }
<div> <button id="flipHeads" type="button" onclick="flip('heads');">Heads</button> <button id="flipTails" type="button" onclick="flip('tails');">Tails</button> <div id="result"></div> </div>
So, here's what's going on in the snippet:所以,这就是片段中发生的事情:
flip()
function, passing to it a parameter ( guess
) representing which side was guessed.flip()
函数,向它传递一个参数 ( guess
),表示猜到了哪一侧。let sideLandedOn = Math.round(Math.random()) == 0 ? 'heads' : 'tails'
) basically "flips" the coin by randomly generating a number that is either 0 or 1, and then deciding it is heads if it is 0, and tails if it is 1 via the conditional/ternary operator.let sideLandedOn = Math.round(Math.random()) == 0 ? 'heads' : 'tails'
)基本上“翻转”通过随机生成一个 0 或 1 的数字,然后通过条件/三元运算符确定如果为 0 则为正面,如果为 1 则为反面。 The line is effectively equivalent to this:let sideLandedOn;
if (Math.round(Math.random()) == 0) {
sideLandedOn = 'heads';
} else {
sideLandedOn = 'tails';
}
innerHTML
of the result
div to be equal to sideLandedOn.result
div 的innerHTML
设置为等于 sideLandedOn。 Note: the template literal注意:模板字面量
`The coin landed on ${sideLandedOn} and... `
is effectively equivalent to等效于
"The coin landed on " + sideLandedOn + " and..."
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.