硬币翻转游戏 JS/HTML

Question

我正在尝试创建一个掷硬币游戏，带有一个用于猜测正面和反面的按钮，并带有适当的猜测输出 - 你猜对了 x，答案是 x，你是正确的/你猜对了 x，答案是 y ，你错了。 我是 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>

Answer 1

我简化了您的代码并使其真正起作用。 我将逐步完成更改：

1. 我给出了包含的div和 ID（翻转）。 然后我将按钮的 ID 更改为Heads或Tails 。
2. 我使用了一个在div id="flip"中查找点击事件的eventListener
3. 此事件查看被单击的元素是否是button而不是包含元素本身。
4. 该脚本将单击元素的 ID 存储为变量，即Heads或Tails
5. 然后它从一个数组中随机滚动得到一个Heads或Tails的结果
6. 最后但并非最不重要的一点是将点击按钮的 ID 与滚动的“翻转”进行比较。 根据两个字符串是否相同，它会输出结果。 “翻转”和“选择”作为变量包含在内以缩短代码。

 /* 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>

Answer 2

您在代码中犯了几个错误； 以下是我能找到的一些，但还有更多：

• document.getElementById( [element] ).onClick = click不起作用 - 点击后应该有括号（ click click() ）
• 在if (Results == fliptails)中，您将flipTails变量拼错为fliptails 。
• 行document.getElementById("result").innerHTML = Heads尝试将结果元素的innerHTML设置为等于不存在的变量Heads 。 您应该将它用引号括起来（即"Heads" ），以将 innerHTML 设置为字符串 "Heads"。 同样与[...] = Tails 。

这里也有相当多的混乱，通常代码很难挽救。 然而，值得庆幸的是，有一种更有效的方法可以实现您的目标。 这是一个功能更有效的代码示例 - 我将逐步介绍：

 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>

所以，这就是片段中发生的事情：

• 在 HTML 端，当单击任一按钮时，它会调用flip()函数，向它传递一个参数 ( guess )，表示猜到了哪一侧。
• 在 JS 端，单击按钮后，翻转函数中的第一行代码（ let sideLandedOn = Math.round(Math.random()) == 0 ? 'heads' : 'tails' ）基本上“翻转”通过随机生成一个 0 或 1 的数字，然后通过条件/三元运算符确定如果为 0 则为正面，如果为 1 则为反面。 该行实际上等效于：

let sideLandedOn;
if (Math.round(Math.random()) == 0) {
  sideLandedOn = 'heads';
} else {
  sideLandedOn = 'tails';
}

• 然后，我们将result div 的innerHTML设置为等于 sideLandedOn。
• 然后，我们使用条件来检查用户是否猜对了。 会生成一个警报，显示硬币落在哪一边，用户猜到了什么，以及他们是赢了还是输了。

注意：模板字面量

`The coin landed on ${sideLandedOn} and... `

等效于

"The coin landed on " + sideLandedOn + " and..."