Xiao Huamei Xiao Huamei - 4 months ago 15
jQuery Question

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).

Answer

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>