Javascript - リジッドコインフリップ（最初のヘッド）

Question

本当に基本的な機能ですが、コインフリップをシミュレートするボタンがあります。最初に "ヘッド"を表示してから、最初の入力後にランダム化して、現在のコードは機能しません。最初のクリックからランダム化されます。

HTML：

<button id = "riggedCoin" onclick = "riggedCoinFlip()"> Rigged Coin </button> 

<h1 id ="h2"> Coin Flip </h1> 

JS：

function riggedCoinFlip() { 

document.getElementById("h2").innerHTML = ("Heads!"); 

var coinFace = Math.floor(Math.random() * 2); 

if (coinFace === 0) { 
var h1 = document.getElementById("h2").innerHTML = ("Heads!"); 
} else { 
var h1 = document.getElementById("h2").innerHTML = ("Tails!"); 

} 
} 

Answer 1

、#h2要素はすでにCoin Flipテキストが含まれています。だから、これを使って初めてチェックすることができます。 チェックするために別の変数は必要ありません。

解決方法を簡略化しました。あなたは試すことができます：

function riggedCoinFlip() { 
 
    var el = document.getElementById("h2"); 
 

 
    if (el.innerHTML === " Coin Flip ") { 
 
    el.innerHTML = "Heads!"; 
 
    } else { 
 
    el.innerHTML = (Math.floor(Math.random() * 2) === 0 
 
     ? "Heads" : "Tails") +"!"; 
 
    } 
 
}

<button id="riggedCoin" onclick="riggedCoinFlip()">Rigged Coin</button> 
 
<h1 id="h2"> Coin Flip </h1>

Answer 2

あなたは一つの変数を使用することができますし、そのvarが変更された後、あなたがランダムに使用することができますので、最初のクリック後にそれを変更してください。まず

var random = false; 
 

 
function riggedCoinFlip() { 
 
    document.getElementById("h2").innerHTML = ("Heads!"); 
 
    if (random != false) { 
 
    var coinFace = Math.floor(Math.random() * 2); 
 
    if (coinFace === 0) { 
 
     var h1 = document.getElementById("h2").innerHTML = ("Heads!"); 
 
    } else { 
 
     var h1 = document.getElementById("h2").innerHTML = ("Tails!"); 
 
    } 
 
    } 
 
    random = true; 
 
}

<button id="riggedCoin" onclick="riggedCoinFlip()">Rigged Coin</button> 
 
<h1 id="h2"> Coin Flip </h1>