<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coin Flip</title>
</head>
<body>
<h1>Coin Flip</h1>
<h3>Let's flip a coin! Choose heads or tails:</h3>
<button onclick="flip()" id="choice">Heads</button>
<button onclick="flip()" id="choice">Tails</button>
<h3 id="guess"></h3>
<h3 id="result"></h3>
<h3 id="confirm"></h3>
</body>
<script src="scripts.js"></script>
</html>
function flip(choice) {
// Declares random number variable
var randomNumber=Math.floor(Math.random()*2) 1;
// Conditional random win/loss
if(randomNumber==1){
document.getElementById("guess").innerHTML = "You guessed " choice "...";
document.getElementById("result").innerHTML = "The coin flips and comes up Tails!";
document.getElementById("confirm").innerHTML = "Good Guess!";
}
else {
document.getElementById("guess").innerHTML = "You guessed " choice "...";
document.getElementById("result").innerHTML = "The coin flips and comes up Heads!";
document.getElementById("confirm").innerHTML = "Good Guess!";
}
}
我正在使用 HTML 和 JS 制作一個簡單的擲硬幣游戲。我無法列印用戶做出的選擇（正面或反面）。有沒有辦法將他們單擊的按鈕作為文本“heads”或文本“tails”傳遞？檢查 JS 是否有將列印出來的文本。
uj5u.com熱心網友回復：
只需在函式呼叫中將正面或反面作為引數傳遞：
<button onclick="flip('Heads')" id="choice">Heads</button>
<button onclick="flip('Tails')" id="choice">Tails</button>
function flip(choice) {
// Declares random number variable
var randomNumber=Math.floor(Math.random()*2) 1;
// Conditional random win/loss
if(randomNumber==1){
document.getElementById("guess").innerHTML = "You guessed " choice "...";
document.getElementById("result").innerHTML = "The coin flips and comes up Tails!";
document.getElementById("confirm").innerHTML = "Good Guess!";
}
else {
document.getElementById("guess").innerHTML = "You guessed " choice "...";
document.getElementById("result").innerHTML = "The coin flips and comes up Heads!";
document.getElementById("confirm").innerHTML = "Good Guess!";
}
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coin Flip</title>
</head>
<body>
<h1>Coin Flip</h1>
<h3>Let's flip a coin! Choose heads or tails:</h3>
<button onclick="flip('Heads')" id="choice">Heads</button>
<button onclick="flip('Tails')" id="choice">Tails</button>
<h3 id="guess"></h3>
<h3 id="result"></h3>
<h3 id="confirm"></h3>
</body>
<script src="scripts.js"></script>
</html>uj5u.com熱心網友回復：
不要重復ID。有關詳細資訊，請參閱示例中的注釋。
// Bind click event to each <button>
document.querySelectorAll('button').forEach(btn => btn.onclick = flip);
// Define event handler -- pass Event Object
function flip(e) {
// Reference the <button> user clicked
const picked = e.target;
// Get the value of picked and convert string to number with ' '
let side = picked.value;
// Get random integer in the range of 1 to 2
let outcome = Math.floor(Math.random()*2) 1;
// Reference <output>
const out = document.querySelector('output');
// If the value of picked equals the random number...
if (side === outcome) {
// Assign winning string with picked id interpolated
out.value = `${picked.id}! You win!`;
} else {
// Otherwise assign losing string to <output>
out.value = `${picked.id}! You lose!`;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coin Flip</title>
</head>
<body>
<h1>Coin Flip</h1>
<p>Let's flip a coin! Choose heads or tails:</p>
<button id='Heads' value='1'>Heads</button>
<button id='Tails' value='2'>Tails</button>
<p><output></output></p>
</body>
<script src="scripts.js"></script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495139.html
標籤：javascript html