Javascript：関数内にボタン/クリックカウンターが組み込まれています

私のウェブサイトのランダムな値のクリック数をカウントしたいと思います。Javascript：関数内にボタン/クリックカウンターが組み込まれています

var count = 0; 
 
var button = document.getElementById("spin-button"); 
 
var display = document.getElementById("displayCount"); 
 

 
button.onclick = function(){ 
 
    count++; 
 
    display.innerHTML = count; 
 
}

<p>The SPIN-button was pressed <span id="displayCount">0</span> times.</p>

問題は、私のJS-プログラムが一部/機能を停止していること、です。新しいランダム値を設定することも、新しい値を計算するボタンが押された回数をカウントすることもできます。 button.onClickの位置が括弧の外か中かに依存します。しかし、両方とも一緒に働かない。

function randomClickX() { 
 

 
    var randomX1 = Math.ceil(Math.random() * 10); 
 
    var randomX2 = Math.ceil(Math.random() * 10); 
 
    var randomX3 = Math.ceil(Math.random() * 10); 
 

 
    document.getElementById("randomX1").innerHTML = randomX1; 
 
    document.getElementById("randomX2").innerHTML = randomX2; 
 
    document.getElementById("randomX3").innerHTML = randomX3; 
 

 
    var ausgabe = "Play again"; 
 
    if (randomX1 === randomX2) { 
 
    if(randomX2 === randomX3) { 
 
     var ausgabe = "Jackpot"; 
 
     } 
 
    } 
 

 
    var count = 0; 
 
    var button = document.getElementById("spin-button"); 
 
    var display = document.getElementById("displayCount"); 
 

 

 
    button.onclick = function(){ 
 
     count++; 
 
     display.innerHTML = count; 
 
    } 
 
}

button.onclickは、実際に動作しますが、randomClickX機能に沿って取得していません。

ここでは両方を行うにはどうすればよいですか？

出典

2016-11-11 Jonas

ボタンを押したときに乱数を更新しますか？ – raphael75

は、あなたはおそらくこれが欲しい：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head> 
<body> 

    <p id="randomX1">X</p> 
    <p id="randomX2">X</p> 
    <p id="randomX3">X</p> 
    <p id="msg"></p> 
    <button type="button" name="button" id="spin-button">SPIN</button> 
    <p>The SPIN-button was pressed <span id="displayCount">0</span> times.</p> 

    <script type="text/javascript"> 

    var count = 0; 
    var button = document.getElementById("spin-button"); 
    var display = document.getElementById("displayCount"); 

    button.onclick = function(){ 
     count++; 
     display.innerHTML = count; 
     randomClickX(); 
    } 

    function randomClickX() { 

     var randomX1 = Math.ceil(Math.random() * 10); 
     var randomX2 = Math.ceil(Math.random() * 10); 
     var randomX3 = Math.ceil(Math.random() * 10); 

     document.getElementById("randomX1").innerHTML = randomX1; 
     document.getElementById("randomX2").innerHTML = randomX2; 
     document.getElementById("randomX3").innerHTML = randomX3; 
     var msg = document.getElementById("msg"); 

     var ausgabe = "Play again"; 
     if (randomX1 === randomX2) { 
      if(randomX2 === randomX3) { 
       var ausgabe = "Jackpot"; 
      } 
     } 
     msg.innerHTML = ausgabe; 
    } 

    </script> 

</body> 
</html>

出典

2016-11-11 20:41:33

ありがとう！私が望むように働く。 _msg_について説明できますか？なぜ私はこれが必要なのですか？ – Jonas

あなたはそれを必要としません私はちょうど "再プレイ"または "ジャックポット"（デフォルトは "再プレイ"を表示するためにそれを使用したが、3つのランダムな値がすべて同じ場合は "ジャックポット"に変更）。他の要素を使ってausgabeを表示したり、他の機能を実行したりすることができます。その部分はあなた次第です。答えが正しいと確認できればそれは本当に役に立ちます:) –

私はspin-buttonをクリック（またはことになって）いるときrandomClickX()が呼び出されると仮定しています。

//set up variables 
var count = 0; 
var button = document.getElementById("spin-button"); 
var display = document.getElementById("displayCount"); 

//when button is pressed. run code 
button.onclick = function(){ 
    count++; //add to the total 
    randomClickX() //spin the wheel 
    display.innerHTML = count; //show the total spin count 
} 

function randomClickX() { 
    //generate the random numbers 
    var randomX1 = Math.ceil(Math.random() * 10); 
    var randomX2 = Math.ceil(Math.random() * 10); 
    var randomX3 = Math.ceil(Math.random() * 10); 
    //display the random numbers 
    document.getElementById("randomX1").innerHTML = randomX1; 
    document.getElementById("randomX2").innerHTML = randomX2; 
    document.getElementById("randomX3").innerHTML = randomX3; 
    //if all 3 are the same assign ausgabe to "Jackpot" 
    var ausgabe = "Play again"; 
    if (randomX1 === randomX2) { 
    if(randomX2 === randomX3) { 
     ausgabe = "Jackpot"; 
     } 
    } 
}

注：私はそうのようなコードを記述します。それに基づいて

ausgabeは死ん変数です。表示する場合はrandomClickX()、返信をausgabe、randomClickX()とすると、表示する場所に結果が割り当てられます。例えばwinning.innerHTML = randomClickX()

出典

2016-11-11 20:41:46

私はこれを数時間前に試しました - しなかった/しませんでした。 _randomClickX（）_を_button.onclick_-functionに含めるのはなぜですか？ – Jonas

Javascript：関数内にボタン/クリックカウンターが組み込まれています

答えて

関連する問題