CODEWITHSUNDEEP
jqueryvariablesif-statementreturn
Opoe
Opoe

Reputation: 1387

jQuery two if statements for 1 variable, but only works for one

Let me try to explain what I'm trying to accomplish. I want to make a memory puzzle, but I have a hard time with the variable, the if statements and returning.

Can you please take a look at my example and click three or four times on the blocks. I want to add some action when the variable == 1 and something else when the variable == 2. But as you can see, this won't work because it skips alerting 1 after one time... Is this a problem with the return()? I believe so, but I hope you can explain me how I can fix this and if it has to do with return.

Example JSFIDDLE

HTML

<div id="container">
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_A"></div>
  </div>
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_B"></div>
  </div>
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_A"></div>
  </div>
  <div class="coverup">
    <div class="hoverdiv"></div>
    <div class="image_B"></div>
  </div>
</div>

JS

var amountofclicks = 0;

$('.coverup').bind("click", function (event) {

  if (amountofclicks < 2) {
    $(this).find('.letter').show();
    amountofclicks++;

    if (amountofclicks == 2) {
      alert('2');
    }
    if (amountofclicks == 1) {
      alert('1');
    }
    $(this).children().show();


  } else {
    $('.coverup').children().hide();
    $(this).children().show();
    amountofclicks = 1;
    return;
  }


});

Upvotes: 1

Views: 3803

Answers (3)

Bula
Bula

Reputation: 1586

You should set ammountofclicks to zero at the end. Also there are more ifs than it is needed. The function should run only if the tile is not already visible or ammountofclicks are zero, so there is one more check at the beggining.

var amountofclicks = 0;

$('.coverup').bind("click", function (event) {
  if (amountofclicks==0 || !$(this).children().is(":visible")) {
    amountofclicks++;
    if (amountofclicks == 1) {
      $('.coverup').children().hide();
    }
    $(this).find('.letter').show();
    $(this).children().show();
    alert(amountofclicks);
    if (amountofclicks == 2) {
      amountofclicks = 0;
    }
  }
});

Upvotes: 2

Nandu
Nandu

Reputation: 3126

Try this

var amountofclicks = 0;

$('.coverup').bind("click", function (event) {

  if (amountofclicks <= 2) {
    $(this).find('.letter').show();


    if (amountofclicks == 2) {
      alert('2');
    }
    if (amountofclicks == 1) {
      alert('1');
    }
    amountofclicks++;
    $(this).children().show();


  } else {
    $('.coverup').children().hide();
    $(this).children().show();
    amountofclicks = 1;
    return;
  }


});

Upvotes: 0

algorhythm
algorhythm

Reputation: 8728

the if-clause

if (amountofclicks == 2) { ... }

could never be reached because it's inside the following if-clause

if (amountofclicks < 2) { ... }

more detailed...

var amountofclicks = 2;

if (amountofclicks < 2) {
    // go here if amountofclicks < 2
    if (amountofclicks == 1) {
        // go here if amountofclicks == 1
    }
    if (amountofclicks == 2) {
        // unreachable, because amountofclicks is always < 2
    }
} else {
    // go here if amountofclicks >= 2
}

Upvotes: 0

Related Questions