Javascript：按钮/点击计数器集成在功能中答案

【问题标题】：Javascript: button/click counter integrated in functionJavascript：按钮/点击计数器集成在功能中
【发布时间】：2017-03-26 03:16:48
【问题描述】：

我想统计我网站上的点击次数或打印随机值的数量。

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

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

&lt;p&gt;The SPIN-button was pressed &lt;span id="displayCount"&gt;0&lt;/span&gt; times.&lt;/p&gt;

问题是，我的 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 功能不符。

我应该把它放在哪里才能做到这两点？

【问题讨论】：

您希望在按下按钮时更新随机数吗？

标签： javascript html function loops

【解决方案1】：

你可能想要这个：

<!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>

【讨论】：

非常感谢！按我的意愿工作。你能解释一下msg吗？为什么我需要这个？
你不需要它我只是用它来显示“再次玩”或“头奖”（默认为“再次玩”，但如果所有三个随机值都相同，则更改为“头奖”） .您可以使用其他元素来显示ausgabe，或者您将执行其他一些功能。那部分取决于你。如果您可以正确检查答案，那将非常有帮助:)

【解决方案2】：

我假设randomClickX() 在单击（或应该）spin-button 时被调用。基于此，我将编写如下代码：

//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()

【讨论】：

我在几个小时前试过这个 - 没有/没有工作。为什么要在 button.onclick 函数中包含 randomClickX()？