CODEWITHSUNDEEP
javascriptfunctionbuttoncallback
geek101
geek101

Reputation: 87

How to create a reset button for slot machine game in JS

I have a prototype of a slot machine game coded in JS and I am struggling to create a reset button to restart the game. I was trying to create a second function called playAgain where the main game function is called back but it's clearly not working. Maybe I'm supposed to give it a parameter? Not sure. Help please!

const num1 = document.getElementById("num-1");
const num2 = document.getElementById("num-2");
const num3 = document.getElementById("num-3");
const message = document.getElementById("message")
const button = document.getElementById("button");

const random1 = Math.floor(Math.random() * 9) + 1;
const random2 = Math.floor(Math.random() * 9) + 1;
const random3 = Math.floor(Math.random() * 9) + 1;

button.addEventListener("click", checkEquality);

function checkEquality() {
    num1.innerHTML = random1;
    num2.innerHTML = random2;
    num3.innerHTML = random3;
    if (random1 === random2 && random1 === random3 && random2 === random3) {
        message.innerHTML = "Congratulations, you won!"
    } else {
        message.innerHTML = "Sorry, you lost!"
    }
    button.innerHTML = "GIVE IT ANOTHER GO!"
}
button.addEventListener("click", playAgain)
function playAgain() {
    if(num1 !== "?" && num2 !== "?" && num3 !== "?") {
        message.innerHTML = "";
        checkEquality()
    }
}
<h1>Slot Machine</h1>
<div>
    <p id="num-1">?</p>
    <p id="num-2">?</p>
    <p id="num-3">?</p>
</div>
<p id="message"></p>
<button id="button">GIVE IT A GO!</button>

Upvotes: 0

Views: 169

Answers (2)

Mohd Anas
Mohd Anas

Reputation: 1

Maybe the problem is you are using the same button for both of the action.

fix :

button.removeEventListener("click",checkEquality);
button.addEventListener("click",playAgain);

in the check equality..function and similarly you can do it for playAgain function.

Upvotes: 0

klediooo
klediooo

Reputation: 650

You need to put the random numbers inside your function, otherwise you just use the same numbers. Also if you use const the value can't be changed anymore.

 const num1 = document.getElementById("num-1");
    const num2 = document.getElementById("num-2");
    const num3 = document.getElementById("num-3");
    const message = document.getElementById("message")
    const button = document.getElementById("button");
    
    button.addEventListener("click", checkEquality);
    
    function checkEquality() {
        var random1 = Math.floor(Math.random() * 9) + 1;
        var random2 = Math.floor(Math.random() * 9) + 1;
        var random3 = Math.floor(Math.random() * 9) + 1;
        num1.innerHTML = random1;
        num2.innerHTML = random2;
        num3.innerHTML = random3;
        if (random1 === random2 && random1 === random3 && random2 === random3) {
            message.innerHTML = "Congratulations, you won!"
        } else {
            message.innerHTML = "Sorry, you lost!"
        }
        button.innerHTML = "GIVE IT ANOTHER GO!"
    }
    button.addEventListener("click", playAgain)
    function playAgain() {
        if(num1 !== "?" && num2 !== "?" && num3 !== "?") {
            message.innerHTML = "";
            checkEquality()
        }
    }
<html>
    <body>
        <h1>Slot Machine</h1>
        <div>
            <p id="num-1">?</p>
            <p id="num-2">?</p>
            <p id="num-3">?</p>
        </div>
        <p id="message"></p>
        <button id="button">GIVE IT A GO!</button>
        
    
        <script src="script.js"></script>
    </body>
    </html>

Upvotes: 1

Related Questions