我是 javascript 新手，我創建了一個隨機選擇正面或反面的程式，并讓用戶單擊兩個按鈕之一（一個標記為正面，另一個為反面），它將顯示他們是否猜對并跟蹤他們的贏/輸。我明白了“你猜到了[正面/反面]”，但下半場總是給出“你是不正確的”。另外它不會顯示贏/輸計數器。
HTML（名為 HeadsT??ails 的檔案）：
<!DOCTYPE html>
<html>
<head>
<title>Project 2</title>
</head>
<body>
<script src = "jasc.js" defer></script>
<p>Guess heads or tails:</p>
<form name = 'headsTails'>
<input type ='button' value = 'heads' onclick = "headsChoice();" />
<input type ='button' value = 'tails' onclick = "tailsChoice();" />
</form>
<div id = 'output'></div>
</body>
</html>
Javascript（名為 jasc 的檔案）：
const coin = ['heads', 'tails'];
const flip = Math.floor(Math.random() * coin.length);
const form = document.forms.headsTails;
const output = document.getElementById('output');
const heads = document.getElementById('heads');
heads.addEventListener('click', headsChoice);
const tails = document.getElementById('tails');
tails.addEventListener('click', tailsChoice);
let win = 0;
let loss = 0;
function headsChoice(e){
if (flip == coin[0]) {
output.textContent = 'You guessed heads, you were correct!';
win ;
} //if end
else {
output.textContent = 'You guessed heads, you were incorrect.';
loss ;
} //else end
output.textContent = 'Wins: ${win} || Losses: ${loss}';
} //headsChoice end
function tailsChoice(e){
if (flip == coin[1]) {
output.textContent = 'You guessed tails, you were correct!';
win ;
} //if end
else {
output.textContent = 'You guessed tails, you were incorrect.';
loss ;
} //else end
output.textContent = 'Wins: ${win} || Losses: ${loss}';
} //tailsChoice end
uj5u.com熱心網友回復：
有兩個問題。
- flip 等于零或一，但絕不是您要與之比較的字串。
if (flip == coin[0])
修復：
if (coin[flip] == coin[0])
- 您需要重新翻轉硬幣，否則您將始終檢查唯一翻轉的硬幣。簡單的解決方法是添加一個
reflip函式并在每個正面或反面選擇之前運行它。
演示
顯示代碼片段
const coin = ['heads', 'tails'];
let flip = Math.floor(Math.random() * coin.length);
const form = document.forms.headsTails;
const output = document.getElementById('output');
const heads = document.getElementById('heads');
heads.addEventListener('click', headsChoice);
const tails = document.getElementById('tails');
tails.addEventListener('click', tailsChoice);
let win = 0;
let loss = 0;
function reflip() {
flip = Math.floor(Math.random() * coin.length);
}
function headsChoice(e) {
reflip()
if (coin[flip] === coin[0]) {
output.textContent = 'You guessed heads, you were correct!';
win ;
} //if end
else {
output.textContent = 'You guessed heads, you were incorrect.';
loss ;
} //else end
output.textContent = 'Wins: ${win} || Losses: ${loss}';
} //headsChoice end
function tailsChoice(e) {
reflip()
if (coin[flip] === coin[1]) {
output.textContent = 'You guessed tails, you were correct!';
win ;
} //if end
else {
output.textContent = 'You guessed tails, you were incorrect.';
loss ;
} //else end
output.textContent = 'Wins: ${win} || Losses: ${loss}';
} //tailsChoice end<p>Guess heads or tails:</p>
<form name='headsTails'>
<input type='button' value='heads' onclick="headsChoice();" />
<input type='button' value='tails' onclick="tailsChoice();" />
</form>
<div id='output'></div>js小提琴
uj5u.com熱心網友回復：
您的 getElementById 方法找不到任何元素，因為沒有 id 為“heads”或“tails”的元素。
嘗試這個：
<!DOCTYPE html>
<html>
<head>
<title>Project 2</title>
</head>
<body>
<script src = "jasc.js" defer></script>
<p>Guess heads or tails:</p>
<form name="headsTails">
<input id="heads" type="button" value="heads" onclick="headsChoice();"/>
<input id="tails" type="button" value="tails" onclick="tailsChoice();"/>
</form>
<div id = 'output'></div>
</body>
</html>
uj5u.com熱心網友回復：
代碼的第二部分沒有正確定義。在字串中插入變數有點棘手。
簡單的單引號不能替換字串中的變數值，必須有這種型別的參考（`）。
let win = 0;
let loss = 0;
function headsChoice(e){
output.textContent = `Wins: ${win} || Losses: ${loss}`;
} //headsChoice end
function tailsChoice(e){
output.textContent = `Wins: ${win} || Losses: ${loss}`;
} //tailsChoice end
uj5u.com熱心網友回復：
您的代碼中有一些小錯誤。首先，您已經宣告了該onClick屬性并附加了一個事件偵聽器，兩者中只有一個是必要的。一個idattribut還缺少你的輸入欄位。flip是一個靜態值，不會改變，但每次翻轉都需要一個隨機值，因此包裝隨機值的函式會很好。
您還可以在每次呼叫flipCoin函式時傳遞一個引數，無論是“heads”還是“tails”。最后，您使用了模板字串，但提供了正常的刻度線'，您必須將字串包裹在 `` 中。
最后但并非最不重要的一點是，我建議flipCoin對兩個按鈕使用一個功能，因為通常它們在做同樣的事情。
let win = 0;
let loss = 0;
const output = document.getElementById('output');
const result = document.getElementById('result');
function flipCoin(chosenValue) {
const coin = ['heads', 'tails'];
const flip = (arr) => {
return arr[Math.floor(Math.random() * arr.length)];
};
if (flip(coin) === chosenValue) {
output.textContent = `You guessed ${chosenValue}, you were correct.`;
win = 1;
} else {
output.textContent = `You guessed ${chosenValue}, you were incorrect.`;
loss = 1;
}
result.textContent = `Wins: ${win} || Losses: ${loss}`;
}<p>Guess heads or tails:</p>
<button id="heads" onclick="flipCoin('heads')">heads</button>
<button id="tails" onclick="flipCoin('tails')">tails</button>
<div id="output"></div>
<div id='result'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349437.html
標籤：javascript html