Adjust the button's color even after it has been clicked

Question

Adjust the button's color even after it has been clicked

My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and I want them to maintain the active state CSS until the form is submitted.

This is what I've done so far:

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).text('SELECTED');
  } else {
    jQuery(this).text('SELECT');
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
</button>

I attempted using :active and :focus to address the issue, but it didn't work. Additionally, in the JQuery code, I'm trying to change the text of the span from "SELECT" to "SELECTED." Can anyone identify what's wrong with that part of the code?

javascript jquery html css

Answer 1

Answer №1

It is recommended to utilize $.html() rather than $.text(). This way, only the text will be retained without any tags.

An efficient method is to extract the HTML as a string, perform the replacement, and then update it. Check out the example below:

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  } else {
    jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
  </h3>
</button>

A more effective approach is to update the text inside the span element:

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).find('.select-active').html('SELECTED');
  } else {
    jQuery(this).find('.select-active').html('SELECT');
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
  </h3>
</button>

Answer 2

It is recommended to utilize $.html() rather than $.text(). This way, only the text will be retained without any tags.

An efficient method is to extract the HTML as a string, perform the replacement, and then update it. Check out the example below:

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  } else {
    jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
  </h3>
</button>

A more effective approach is to update the text inside the span element:

jQuery('.choose-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).find('.select-active').html('SELECTED');
  } else {
    jQuery(this).find('.select-active').html('SELECT');
  }
});

.choose-school.active {
  background-color: #eeffd4;
}
.choose-school:active {
  background-color: #eeffd4;
}
.choose-school:focus {
  background-color: #eeffd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button type="button" class="choose-school">
  <h3>Testing
    <span class="select-active">SELECT</span>
  </h3>
</button>

Answer 3

Answer №2

There are a couple of issues with the code you provided:

The HTML `<h3>` tag was left unclosed

<h3>Testing</h3>

You attempted to change the text for the entire button instead of just the text inside

This will only modify the content within the span:

$(this).find('.select-active').text('SELECTED');

(semantical) You can use `$` instead of `jQuery`

$(this) // ...

Here is a fixed version of your code in this fiddle: https://jsfiddle.net/fyha5m9g/

Answer 4

There are a couple of issues with the code you provided:

The HTML `<h3>` tag was left unclosed

<h3>Testing</h3>

You attempted to change the text for the entire button instead of just the text inside

This will only modify the content within the span:

$(this).find('.select-active').text('SELECTED');

(semantical) You can use `$` instead of `jQuery`

$(this) // ...

Here is a fixed version of your code in this fiddle: https://jsfiddle.net/fyha5m9g/

Answer 5

Answer №3

If you want to change the appearance of a button when clicked, it's recommended to create a new class in your CSS file and apply it dynamically using jQuery. Avoid using focus on the button as it may not be necessary in this case. Here is an example:

<script>
jQuery('.choose-school').click(function(){

        if(jQuery(this).hasClass('active')){
          jQuery(this).removeClass('active');
          jQuery(this).text('SELECTED');
        }else{
          jQuery(this).addClass('active');
          jQuery(this).text('SELECT');
        }
    });
</script>

CSS file

.choose-school.active {
    background-color: #eeffd4; 
}

Answer 6

If you want to change the appearance of a button when clicked, it's recommended to create a new class in your CSS file and apply it dynamically using jQuery. Avoid using focus on the button as it may not be necessary in this case. Here is an example:

<script>
jQuery('.choose-school').click(function(){

        if(jQuery(this).hasClass('active')){
          jQuery(this).removeClass('active');
          jQuery(this).text('SELECTED');
        }else{
          jQuery(this).addClass('active');
          jQuery(this).text('SELECT');
        }
    });
</script>

CSS file

.choose-school.active {
    background-color: #eeffd4; 
}

Adjust the button's color even after it has been clicked

Answer №1

Answer №2

The HTML `<h3>` tag was left unclosed

You attempted to change the text for the entire button instead of just the text inside

(semantical) You can use `$` instead of `jQuery`

Answer №3

Similar questions

Guide on sending an ajax request following a successful submission of a form using Contact Form 7, all while incorporating multiple tabs within Bootstrap 5

How can I place this ribbon on top of an image in an HTML email to ensure it displays correctly on email clients such as Outlook?

Displaying incorrect text format on a TextView using Html.fromHtml()

HTMLElement addition assignment failing due to whitespace issues

Using headers in the fetch api results in a 405 Method Not Allowed error

Utilizing Vue3's draggable component to seamlessly incorporate items

Developing a vue.js component library without the need for constant rebuilding after every edit

What's the best way to ensure my website's footer spans the entire width of the webpage?

jQuery does not support PHP code recognition

Identifying the length of a division element following its addition

Performing an asynchronous POST request in JavaScript

What is the most efficient method for updating URLs in CSS files before the website goes live?

What is the best way to remove any objects in this array that have empty strings as values?

Changing the position of the checkbox label to be above the checkbox

What is the best way to trigger an API call using AJAX whenever the page loads and at regular intervals using `setInterval()` function?

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

Convert HTML Form to PDF or Docx with Angular 4

Making a dropdown menu spin using Jquery and Javascript

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Using jQuery to send JSON data through AJAX to PHP

Adjust the button's color even after it has been clicked

Answer №1

Answer №2

The HTML <h3> tag was left unclosed

You attempted to change the text for the entire button instead of just the text inside

(semantical) You can use $ instead of jQuery

Answer №3

Similar questions

Guide on sending an ajax request following a successful submission of a form using Contact Form 7, all while incorporating multiple tabs within Bootstrap 5

How can I place this ribbon on top of an image in an HTML email to ensure it displays correctly on email clients such as Outlook?

Displaying incorrect text format on a TextView using Html.fromHtml()

HTMLElement addition assignment failing due to whitespace issues

Using headers in the fetch api results in a 405 Method Not Allowed error

Utilizing Vue3's draggable component to seamlessly incorporate items

Developing a vue.js component library without the need for constant rebuilding after every edit

What's the best way to ensure my website's footer spans the entire width of the webpage?

jQuery does not support PHP code recognition

Identifying the length of a division element following its addition

Performing an asynchronous POST request in JavaScript

What is the most efficient method for updating URLs in CSS files before the website goes live?

What is the best way to remove any objects in this array that have empty strings as values?

Changing the position of the checkbox label to be above the checkbox

What is the best way to trigger an API call using AJAX whenever the page loads and at regular intervals using `setInterval()` function?

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

Convert HTML Form to PDF or Docx with Angular 4

Making a dropdown menu spin using Jquery and Javascript

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Using jQuery to send JSON data through AJAX to PHP

The HTML `<h3>` tag was left unclosed

(semantical) You can use `$` instead of `jQuery`