CODEWITHSUNDEEP
javascripthtmljquerycss
Dean C Giroir
Dean C Giroir

Reputation: 17

Using the Same jQuery Function in Separate Buttons

I'm trying to get each button to change color on click. However, I want to separate buttons 1-3 from buttons 4-6 so they are independent from each other. I want to be able to click buttons 1-3 and they change color without affecting 4-6 and vice versa. My code is attached. I'm sure this is very simple but my feeble mind can't figure it out :-) Any suggestions?

$(document).ready(function(){
  $("button").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function(){
  $("button").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});
.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Upvotes: 1

Views: 171

Answers (3)

John Slegers
John Slegers

Reputation: 47081

Your error is that you add both click handlers to every button instead of only adding the appropriate handler to the appropriate buttons. So every time you push a button, you call both handlers consecutively, rather than just the handlers for that button set.

Replacing the first $("button") with $(".featuredBtn") and the second $("button") with $(".featuredBtn2") achieves what you're tying to achieve.

Note that there's no need to call $(document).ready() twice. You can just call it once combine the code for both handlers in that single call. Technically, this is not an error, but your code is cleaner if you just call $(document).ready() here.

Demo

$(document).ready(function(){
  $(".featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });

  $(".featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});
.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Upvotes: 0

David
David

Reputation: 218828

Instead of applying both handlers to all instances of $('button'), specifically target the instances you want. Your current markup separates them by class, so you can use $(".featuredBtn") and $(".featuredBtn2") to identify those elements:

$(document).ready(function(){
  $(".featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function(){
  $(".featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});
.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Upvotes: 1

Lee Taylor
Lee Taylor

Reputation: 7984

Simple, just use the classes that you have already supplied in the selector.

Also, note that you only need one ready handler, not two.

$(document).ready(function(){
  $("button.featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });

  $("button.featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});
.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Upvotes: 0

Related Questions