How to show a div depending on the numbers of games

Question

I have a question and I can't resolve it. Can you help me please? So my php code :

$aTicketsGames = array(134, 137, 165, 136, 177, 181, 190);
$b_isRapidGame = false;
  if(in_array($i_jeu, $aTicketsGames)){
      $b_isRapidGame = true;
}

In .js after click on the button I do :

 if(obj.google_analytics.is_rapid_game == true){
    var i++;
    if(i == 10){
       document.getElementById('div1').setAttribute('class','display-block');
    }
    if(i==20){
       document.getElementById('div2').setAttribute('class','display-block');  
    }
 }

The idea is : suppose I have a variable i signifying the number of games played.

if i = 10,30,50,70,90.... show div1.

if i = 20,40,60,80,100.... show div2.

I'm newbie in .js and I have no idea how to impliment this. Help me please!!!!

Thx in advance.

Answer 1

See comments inline:

var i = 0; // Define it out of `if`.

if (obj.google_analytics.is_rapid_game === true) {
    i++; // Increment by 1

    if (i && (i % 20) === 0) { // If divisible by 20
        $('#div2').show(); // Show `div2`

        // OR
        $('#div2').addClass('display-block'); // Add Class
    } else if (i && (i % 10) === 0) { // If divisible by 10
        $('#div1').hide(); // Hide `div1`

        // OR
        $('#div1').removeClass('display-block'); // Remove Class
    }
}

Answer 2

Use style instead of class and use % for the if condition. Also, i should be set globally not locally.

   var i = 0;
   if(obj.google_analytics.is_rapid_game == true){
        i++;
        if(i % 20 == 10){
           document.getElementById('div1').setAttribute('style','display-block');
        }
        else if(i % 20 == 0 && i > 0){
           document.getElementById('div2').setAttribute('style','display-block');  
        }
     }

Answer 3

var i = 0;
if (obj.google_analytics.is_rapid_game === true) {
    i++;

    if ((i % 20) === 0) {
        $('#div2').show();**//or** $('#div2;).css('display','block');
        $('#div1').hide();**//or** $('#div1;).css('display','none');
    } else if ((i % 10) === 0) {
        $('#div1').show();
        $('#div2').hide();
    }
}