ボタンを使用してコインフリップの結果を表示するJavaScript

私は、特定のイメージを出力する簡単なコインフリップを作成しようとしています。たとえば、この場合はtrueかfalseかに基づいてctflipとtflipです。ボタンを押すと、数字を生成して正しい画像を表示するためにcoinFlip関数を実行します。ボタンを使用してコインフリップの結果を表示するJavaScript

<!DOCTYPE html> 
    <html> 
    <body> 
    <h1>My Web Page</h1> 
    <p>My paragraph.</p> 
    <p id="flipDisplay"></p> 
    <button onclick="coinFlip()"+"display()">Flip the Coin!</button> 
    <script> 
    function coinFlip() { 
    return (Math.floor(Math.random() * 2) == 0); 
    } 
    function display() { 
    if (coinFlip()) { 
     document.write('<img src="./tflip.png">'); 
    } 
    else {document.write('<img src="./ctflip.png">'); 
    } 
    } 
    </script> 
    <!--<a><img src=javacript:flip></a> --> 
    </body> 
    </html>

出典

2016-03-31 Russell Bloxwich

あなたは質問をしてから、いくつかのコードを提供しました。何が問題ですか？コードはあなたがしたいことをしませんか？非常に最初の点検で私はそれに間違った何かを見ない。 – Lagerbaer

2つの関数を呼び出すための構文が正しくありません。ディスプレイはcoinflipを呼び出すので、呼び出し側のディスプレイだけがうまく動作するはずです。

<!DOCTYPE html> 
    <html> 
    <body> 
    <h1>My Web Page</h1> 
    <p>My paragraph.</p> 
    <p id="flipDisplay"></p> 
    <button onclick="display()">Flip the Coin!</button> 
    <script> 
     function coinFlip() { 
     return (Math.floor(Math.random() * 2) == 0); 
     } 
     function display() { 
     if (coinFlip()) { 
      document.write('<img src="./tflip.png">'); 
     } else { 
      document.write('<img src="./ctflip.png">'); 
     } 
     } 
    </script> 
    <!--<a><img src=javacript:flip></a> --> 
    </body> 
    </html>

二つの機能を呼び出すための適切な構文はonClick="first();second();"ですが、それだけで、必要に応じて他の人を呼び出す1つの関数を呼び出すほうが良い場合が多いです。

出典

2016-03-31 23:47:45 IrkenInvader

これは間違っています、あなたは最も確実に1つのonclickイベントで2つの関数を呼び出すことができます。セミコロンで区切る必要があります。 – JordanHendrix

Gotcha編集。これは、coinFlipの呼び出しが不要であるという事実を変更するものではありません。 – IrkenInvader

HTML：

<button onClick="handleButtonClick();">Flip Coin</button>

JS：

function handleButtonClick() { 
    coinFlip(); 
    display(); 
}

一般的にスクリプトコードの面での単一のエントリポイントにあなたのHTMLコントロールをマップするクリーナーです。そのため、ユーザーによる1つの論理アクションは、関数名によって明確に記述された単一の論理的な機能につながります。より簡潔でメンテナンス可能なコードを作成します。

ただし、特定の例では、両方の関数を呼び出す必要はありません。表示関数内からすでにcoinFlip関数を呼び出しています。したがって、実際に呼び出す必要があるのは、実際にはdisplay（）です。

出典

2016-03-31 23:59:39 ManoDestra

なぜ彼はonclickで両方の関数を呼び出すことができますか？ – JordanHendrix

display関数を読み込みます - ここでの2つの関数呼び出しは全く必要ありません – IrkenInvader

私の悪い方が正しいので、より良い答えです。 – JordanHendrix

ボタンを使用してコインフリップの結果を表示するJavaScript

答えて

関連する問題