step process with JavaScript doesn't change colors-CodePudding

I am trying to make a step process with JavaScript. And I want it when it reaches the step 3, the color changes to another color. I tried a lot, but I didn't succeed.

Picture how step process works

Picture how I want it to work

$(document).ready(function() {
  var i = 1;

  var id = setInterval(steps, 700);

  function steps() {
    if (i == 4) {
      clearInterval(id);
    } else {
      $(".step"   i).css('background-color', 'rgb(134 209 109)');
      i  ;
    }
  }
  $(".btn-next").on("click", function() {
    $('.page-1').fadeOut(1000, function() {
      $('.page-2').fadeIn(1000);

    });

    var interval = setInterval(slide, 1200)
    d = 1;

    function slide() {
      if (d == 6) {
        clearInterval(interval);
        $('.btn-next-two').fadeIn();
        $('.search').fadeOut();
      } else {
        $(".ship-"   d).addClass('slide-in-left');
        $(".ship-"   d).css('display', 'block');
        d  ;
      }
    }
  });
  $(".btn-next-two").on("click", function() {
    $('.page-2').fadeOut(1000, function() {
      $('.page-3').fadeIn(1000);

    });
  });
  $('.btn-delivery').on('click', function() {
    $('.page-3').fadeOut(1000, function() {
      $('.page-4').fadeIn(1000);
    });
  });
  $('.btn-time').on('click', function() {
    $('.page-4').fadeOut(1000, function() {
      $('.page-5').fadeIn(1000);
    });
  });
});

step {
  min-height: 20px;
  margin-right: 2px;
  border-radius: 14px;
  background-color: #a9b7b9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
</div>
<div >
</div>
<div >
</div>
<div >

CodePudding user response：

Just put

else if(i == 3){
           $(".step" i).css('background-color','red');
           i  ;
       }

on the condition.

CodePudding user response：

There is a tiny issue in your javascript code.

I updated the function step.

function steps(){
  if(i == 5){
    clearInterval(id);
  }
  else if(i == 3) {
    $(".step" i).css('background-color','red');
    i  ;
  }
  else{
    $(".step" i).css('background-color','rgb(134 209 109)');
    i  ;
  }
}

Here is full code.

$(document).ready(function(){
      var i = 1;

      var id = setInterval(steps,700);
      function steps(){
           if(i == 5){
               clearInterval(id);
           }
           else if(i == 3) {
               $(".step" i).css('background-color','red');
               i  ;
           }
           else{
               $(".step" i).css('background-color','rgb(134 209 109)');
               i  ;
           }
      }
      $( ".btn-next" ).on( "click", function() {
      $('.page-1').fadeOut(1000, function(){
          $('.page-2').fadeIn(1000);

      });

      var interval = setInterval(slide,1200)
      d = 1;
      function slide(){
          if(d == 6){
              clearInterval(interval);
              $('.btn-next-two').fadeIn();
              $('.search').fadeOut();
          }
          else{
              $(".ship-" d).addClass('slide-in-left');
              $(".ship-" d).css('display','block');
              d  ;
          }
      }
      });
      $( ".btn-next-two" ).on( "click", function() {
      $('.page-2').fadeOut(1000, function(){
          $('.page-3').fadeIn(1000);

      });
      });
      $('.btn-delivery').on('click',function(){
       $('.page-3').fadeOut(1000, function(){
          $('.page-4').fadeIn(1000);
          });});
      $('.btn-time').on('click',function(){
       $('.page-4').fadeOut(1000, function(){
          $('.page-5').fadeIn(1000);
          });});
      });

.step{
  min-height:20px;
  margin-right:2px;
  border-radius:14px;
  background-color:#a9b7b9;
}

<!DOCTYPE html>
<html lang="en">
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div >
    </div>
    <div >
    </div>
    <div >
    </div>
    <div >

  </body>
</html>