CODEWITHSUNDEEP
jquery
badrijani
badrijani

Reputation: 127

If statement returns false even if its true

I made timer so when dro is more than 1 I want button to have class active else to removeclass if statement works but else not. any solutions ?

    var dro = 5;
    var saboloo = 0;
    function setup(){
        var es = $('#dro');
        dro--;
        es.html(dro);
        if(dro == -1){
            es.html(clearInterval(setupInterval));
            $('.wait').html('Game started');
        }
    }
    var setupInterval = setInterval(setup,1000);

    function manamde(){
        if(dro > 1){
            $('button').addClass('active');
        } else {
            $('button').removeClass('active');
        }
    }
    manamde();

  <h1 class="wait"><span value="5" id="dro">5</span>Seconds before the game starts</h1>
<button>start</button>```

Upvotes: 0

Views: 48

Answers (1)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

I think you've just forgotten to call the manamde() function from within setup().

The code you provided will just call it once on initialisation (and therefore add the class .active as dro is initially set as 5), but not check again with each firing of the setInterval. The if statement itself is working absolutely fine.

I've tweaked your code below and added some styling to .active to demonstrate that it is working.

Let me know if this wasn't what you were hoping for.

Demo

var dro = 5;
var saboloo = 0;

function setup() {

  var es = $('#dro');
  
  dro--;
  
  es.html(dro);
  
  if (dro == -1) {
  
    es.html(clearInterval(setupInterval));
    $('.wait').html('Game started');
    
  }
  
  // Add a call to run manamde() from within setup
  // This will then run each second
  manamde();
  
}

var setupInterval = setInterval(setup, 1000);

function manamde() {
  if (dro > 1) {
    $('button').addClass('active');
  } else {
    $('button').removeClass('active');
  }
}

// This is still needed to add .active before the first setInterval is completed
manamde();
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="wait"><span id="dro">5</span> seconds before the game starts</h1>
<button>start</button>

Upvotes: 1

Related Questions