ボタンからのクリックアクションで機能するif/elseステートメント

確かに私はjavascriptの新機能ですが、私がやろうとしていることは単純だと思いますが、この機能は、ページのロード/リロードの代わりにボタンをクリックして動作します。ボタンからのクリックアクションで機能するif/elseステートメント

<script type="text/javascript"> 
 
    <!-- 
 
    var ic = 9; // Number of alternative images 
 
    var xoxo = new Array(ic); // Array to hold filenames 
 

 
    xoxo[0] = "images/StaminUp.png" 
 
    xoxo[1] = "images/DoubleTap.png" 
 
    xoxo[2] = "images/QucikRevive.png" 
 
    xoxo[3] = "images/ElectricCherry.png" 
 
    xoxo[4] = "images/Juggernog.png" 
 
    xoxo[5] = "images/SpeedCola.png" 
 
    xoxo[6] = "images/MuleKick.png" 
 
    xoxo[7] = "images/WidowsWine.png" 
 
    xoxo[8] = "images/DeadShot.png" 
 

 
    function pickRandom() { 
 
     if (Math.random) 
 
      return [Math.floor(Math.random() * xoxo.length)]; 
 
     else { 
 
      var now = new Date(); 
 
      return (now.getTime()/1000) % xoxo.length; 
 
     } 
 
    } 
 
    // Write out an IMG tag, using a randomly-chosen image name. 
 
    var choice = pickRandom(ic); 
 
    // --> 
 
    
 
    </script>

<html> 
 
<head> 
 

 
</head> 
 
<body> 
 
<p id="perk"></p> 
 
<script>document.getElementById("perk").innerHTML = ('<img src= "'+xoxo[choice]+'">')</script> 
 
</body> 
 
</html>

出典

2016-07-21 nate schwarz

if文の目的は何ですか？ Math.randomの存在を確認していますか？ – Enjayy

明らかに彼はそうしています...そして、そうでなくても、彼の質問にとっては重要ではありません。 – ScientiaEtVeritas

だから、ちょうどこのようなIDを持つボタンを作成：

<button id="changeImage">Change Image</button>

今、あなたは、誰かがそのボタンをクリックした場合にトリガされることにイベントリスナーを追加。イベントリスナーは関数を呼び出すので、イメージの変更を独自の関数にスワップすることをお勧めします。

function changeImage() { 
     document.getElementById("perk").innerHTML = ('<img src= "'+xoxo[pickRandom(ic)]+'">'); 
    }

一度始めにこの関数を呼び出し：

changeImage();

そして、この機能を使うには、イベントリスナーにパラメータとして渡します：

document.getElementById("changeImage").addEventListener('click', changeImage);

チェックアウトこのフィドルを： https://jsfiddle.net/u0jw8u11/

出典

2016-07-21 16:57:49 ScientiaEtVeritas

ありがとう！私はそれを働かせることができた、それほど長くかかったと信じられないが、私のためにそれを説明してくれてありがとう。 –

こんにちは@nateschwarz。これまたは任意の答えがあなたの質問を解決した場合は、左側のチェックマークをクリックしてそれを受け入れることを検討してください。これは、あなたが解決策を見つけ出し、回答者とあなた自身の両方に評判を与えていることを広範なコミュニティに示します。これを行う義務はありません。 – ScientiaEtVeritas

ボタンからのクリックアクションで機能するif/elseステートメント

答えて

関連する問題