Having trouble getting your JQuery code to run when a button is clicked?

I currently have three buttons enclosed in div tags, as shown below.

<div id="make_bigger">
    <button type="button">Bigger</button> 
</div>
<div id="make_smaller">
    <button type="button">Smaller</button> 
</div>
<div id="make_normal_size">
    <button type="button">Normal Size</button> 
</div>

My goal is to change the color of the "Bigger" button to blue when clicked (using a .selected CSS class). The jQuery code I am using is as follows:

$('#make_bigger').bind('click', function () {
    $('body').addClass('bigger');
    $('body').removeClass('normal-size');
    $('body').removeClass('smaller');
    $(this).addClass('selected');
});

Unfortunately, this code is not working and the color is not changing. What could be the reason behind this issue?

Any assistance would be greatly appreciated.

Answer №1

modify the final line to

$(this).children('button').addClass('chosen');

Answer №2

Web Development

<div id="increase_size">
    <button type="button">Increase</button>
</div>
<div id="decrease_size">
    <button type="button">Decrease</button>
</div>
<div id="normal_size">
    <button type="button">Normal</button>
</div>
<style type="text/css">
    .highlighted{background:yellow}
</style>

Javascript/jQUERY

$('#increase_size').click(function() {
     $('#increase_size button').addClass('highlighted');
});

VIEW DEMO http://jsfiddle.net/mRwMt/10/

Answer №3

Instead of giving the button a selected class, you can give the containing div the class selected. Check out this jsfiddle example: http://jsfiddle.net/AFNJ9/.

You can also style it with CSS like this:

.selected button {background:blue;}
This will change the background color of the button to blue.

In my opinion, using 'on' is preferable. Here's a helpful discussion on the topic: What's the difference between `on` and `live` or `bind`?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Universal click tracker logging clicks from all users across the globe

I am new to CSS, HTML, and JS, but I have a unique idea for a click counter that counts the total clicks made by all users. For example, if the counter is at "0" and person A clicks once, then person B also clicks once, the result should show as "2" inste ...

Modify the background of a div and an image

My goal is to add a background to both the image and the div itself, similar to what I've seen on Amazon. However, I'm struggling to achieve this effect where the white background of the image doesn't show when applied onto the div: Image w ...

centered calculation with an offset

Check out what I'm attempting here I am trying to keep an element in the center and have another element hug the left side of it. Essentially, I want the leftmost position of the left div to be right: calc(50% - 200px - (left's width)); The is ...

Avoiding server requests in Firefox by refraining from using ajax

I've implemented the following jquery code: $("#tasksViewType").selectBox().change( function (){ var userId = $('#hiddenUserId').val(); var viewTypeId = $("#tasksViewType").val(); $.post('updateViewType& ...

Using JSP and Jquery for uploading files

I have a specific requirement to submit a form asynchronously using AJAX, which includes a file input. Below is the code I have written, however, I am encountering an error. Input.jsp: <script> function fileUpload() { var formData = $('#myform ...

Using Java Swing to apply HTML styling to text strokes

I have come across this code snippet for a Java swing JLabel: "<html>\n" + "<head><style>\n" + "p { color: white;\n" + " text-shadow:\n" + " -1px -1px 0 #000,\n" + " 1px -1px 0 #000,\n" + " -1 ...

Ways to Utilize Jquery to Modify the aria-expanded="false" Component within a DOM Element in Bootstrap

I'm presented with this particular element: <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> My goal is to utilize jquery (or vanilla javascript) i ...

Generating a vertical bar adjacent to a bullet point in a list

Is there a way to add a vertical line next to each list item (except the last) without adding a new div? Adding a border line added an extra one that I didn't want. Sample HTML: <ul class="list"> <li><span id = "home">H ...

Applying CSS3 transition only to the active link, not all links on the page

Trying to implement a transition effect on all navigation links on my website, but so far only achieved it for visited links. Additionally, working on adding the transition effect to drop-down menus. body .main-nav .active-link >a, body .main-nav .ac ...

Conceal a card once verified within a bootstrap modal upon successful AJAX completion

On my delete page, there are multiple posts with a delete button. When the delete button is clicked, a Bootstrap modal opens asking for confirmation "Are you sure you want to delete this post? YES : NO" If the YES button is clicked, the .click(function(e) ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

By employing the pseudo selector ::after, one can enhance the design

Trying to align 2 images next to each other, I am floating one left and the other right with the intention of clearing the float using the ::after pseudo selector. The surrounding text is expected to flow in between the images. I often struggle with maki ...

utilizing variables in the rel attribute within jQuery along with the $.get method

Can someone help me with this issue: I am trying to hide all submenus on a page except for the one related to the current loaded page. The information about which submenu should remain open is stored in a PHP session, so I attempted the following: $.get( ...

At a certain browser width, the background image will adjust to be responsive

Currently, I have a large background image with specific dimensions that look great on desktop. The background position is set to center top which allows me to see the entire image, but as the browser width decreases, the width of the image gets cropped. ...

How can I use ontouchstart and ontouchend events in jQuery?

Currently, I am using the following code to change the class of elements on touch: ontouchstart="$(this).addClass('select');" ontouchend="$(this).removeClass('select');" I was wondering if there is a more efficient way to achieve this ...

CSS FlexBox Model: What sets apart 'flex' from 'box-flex'?

When working with the CSS flex box model, there is a diverse range of properties available. What sets apart the following properties from each other? -webkit-flex: 1; -moz-flex: 1; -ms-box-flex: 1; box-flex: 1; compared to -webkit-flex: 1; -moz-box-fle ...

What steps should I take to trigger a notification when no selection has been made?

When the product size is not set, the text "Must pick 1 size for the product" should be displayed. However, I am facing an issue with displaying this text. Can someone guide me on how to properly use the select and input elements? <select name="product ...

Replacing an existing pie chart with a new one using JavaScript

I created pie charts using chartjs V2.6.0, and everything was working fine until I encountered an issue. Whenever I input new data into the same chart, it keeps displaying the previous data when hovering over. I attempted to fix this by using the $('# ...

Filtering Items with Checkboxes in JavaScript

I'm currently working on creating a filter system using checkboxes. Here is an example of what I have: Red squares Red circles Blue squares Blue circles I am aiming to set up filters based on both color and shape. However, I am facing some challe ...

Using the for loop within an ajax call for Fullcalendar

I am interested in using a for loop within AJAX while utilizing the FullCalendar JQuery plugin. Can this be achieved? Here is a snippet of my code: $("#frm").attr("action","readCountOfAdv.do"); $("#frm").ajaxSubmit(advCount); var advCount = { ...