CODEWITHSUNDEEP
jquery
Xiao Huamei
Xiao Huamei

Reputation: 23

How can I trigger an event after two different buttons have been clicked?

I'm working on a game. In this particular level, the screen is full of buttons, and you have to press two specific buttons in order to move on to the next level. So far, I've tried using a counter (set a variable, add +1 each time the right button is clicked, and then move to the next level when that variable reaches 2), playing with .val(), and having correct button clicks return "true" values (so when two "true" values are received it moves on to the next level". None of these have worked, and to be honest, I don't understand .val() that well. Also, I don't know if this would affect it, but I disable each correct button after it has been clicked.

I've already checked out this page, but I'm not sure if I entirely understand it. It seems like it's doing the same thing I attempted earlier, adding 1 to a variable upon a button click and triggering the event when the variable reached 2: How to trigger an event after clicking two different button in Javascript

TL;DR: Does anybody know how to trigger an event after two buttons have both been clicked?

//first button
$("#button").click(function() {
    $(this).prop("disabled", true);
});

//second button
$("#otherButton").click(function() {
    $(this).prop("disabled", true);
});

//then, after the above two buttons have been pressed, i want to hide Level 2 (.lvl2) and show Level 3 (.lvl3).

Upvotes: 2

Views: 772

Answers (3)

Moishe Lipsker
Moishe Lipsker

Reputation: 3032

Store a global variable and update it to true after clicking on the first button. When clicking the second button, check if that variable is set to true. If it is, move to the next level.

$(function(){
  var firstClicked;
//first button
$("#button").click(function() {
    firstClicked = true;
});

//second button
$("#otherButton").click(function() {
    if(firstClicked) {
        $('#level').text('Next Level');
    }
});
});
#button, #otherButton {
    border-radius: 3px;
    padding: 6px 12px;
    background-color: #58d;
    width: 50px;
    height: 10px;
    margin: 5px;
    cursor: pointer;
}
#level {
    margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="button">First</span>
<span id="otherButton">Second</span>
<div id="level"></div>

Upvotes: 1

Stephan Sutter
Stephan Sutter

Reputation: 400

With this, either of the buttons is clicked first, it will give you success. 

var buttonClick = 0;
$("#button, #otherButton").on("click", function(){
  if(buttonClick == 0){
    buttonClick++;
  }else{
     console.log("Success.");
  }
});

Upvotes: 0

Shahbaz Hashmi
Shahbaz Hashmi

Reputation: 2813

Try like this.

var nlevel = 0;

//first button
$("#button").click(function() {
    $(this).prop("disabled", true);
nlevel++;
});

//second button
$("#otherButton").click(function() {
    $(this).prop("disabled", true);
nlevel++;
if(nlevel==2)
{
nlevel = 0;
gotonlevel(); // function call for next level
}
});

function gotonlevel()
{
// code for next level 
}

Upvotes: 0

Related Questions