how can i toggle the color of the text inside a button

I’m trying to toggle the color of the text inside a button after it’s been clicked, currently the background color toggles on and off when clicking on a button, but the text color of all buttons change at same time, i’d only like the selected button to change, how do i fix this ?

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass("active");
});
$(document).on('click', '.newsbutton', '.btn-2', function() {
  $('.btn-2').addClass('selected');
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary newsbutton">
            <p href="" class=" rel="nofollow noreferrer noopener"btn-2">BBC</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">The Guardian</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Financial Times</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Metro</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Techcrunch</p> 
            </button>

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You cannot have p inside button. Buttons can only have phrasing content. Use spans instead.

That being said, you are explicitly telling jQuery

$('.btn-2').addClass('selected');

to add that class to all elements matching .btn-2. Instead, use this and find:

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass('active').find('.btn-2').addClass('selected');
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary newsbutton"><span class="btn-2">BBC</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">The Guardian</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Financial Times</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Metro</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Techcrunch</span></button>

Method 2

$(document).on('click', '.newsbutton', function() {
  $( ".btn-container .btn" ).each(function( index ) {
    $(this).removeClass('active');
  });
    $(this).toggleClass("active");
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-container">
<button class="btn btn-secondary newsbutton">BBC</button>

<button class="btn btn-secondary newsbutton">The Guardian
            </button>

<button class="btn btn-secondary newsbutton">Financial Times
            </button>
            </div>

I hope this what you looking for and BTW note don’t use p tag inside button. If you needed use span tag

Method 3

You are correctly capturing the currently clicked button, but your issue is with how you are implementing the color change. I believe relying too much on JS here rather than on CSS over complicates things.

Note on my implementation I am only using active as the class which represents both the text color and background color change within the button itself. I am relying more on CSS to handle the style changes and letting JS toggle a single class active.

This simplification is reflected in the HTML due to removing the span dependency, since we are working directly on the button. Using a simple selector for listening to the click events “button” (or a class name if you feel more comfortable) and toggling a single class within the button itself. That reduces the complexity out of JS into CSS and as a result you get a cleaner HTML implementation.

$(document).on('click', 'button', function (event) {
    $(this).toggleClass('active');
});

button {
  color: black;
}
button.active {
  background-color: green !important;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary">BBC</button>
<button class="btn btn-secondary">The Guardian</button>
<button class="btn btn-secondary">Financial Times</button>
<button class="btn btn-secondary">Metro</button>
<button class="btn btn-secondary">Techcrunch</button>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating