CODEWITHSUNDEEP
javascripthtmlfunctionloops
Jonas
Jonas

Reputation: 111

Javascript: button/click counter integrated in function

I would like to count the clicks or number of printed randomvalues on my website.

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>

The problem is, that my JS-program stops one part/function. Either I can set new random-values or I can count how often the button to calculate new values was pressed. It depends of the position of button.onClick, if it's out or inside the brackets. But both together doesn't work. 

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 works in fact, but doesn't get along the randomClickX-function.

Where should I position it to do both?

Upvotes: 0

Views: 166

Answers (2)

Menachem Hornbacher
Menachem Hornbacher

Reputation: 2165

I am assuming that randomClickX() is called when spin-button is clicked (or supposed to be). Based on that I'd write the code like so:

//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";
        }
    }
}

Note:

ausgabe is a dead variable. if you want it displayed have randomClickX() return ausgabe and when you call randomClickX() assign its result to where you want it to display. e.g. winning.innerHTML = randomClickX()

Upvotes: 0

Luka Lopusina
Luka Lopusina

Reputation: 2647

You probably want this:

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

Upvotes: 1

Related Questions