Home/ Questions/Q 8310165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T19:21:40+00:00

I have started to learn jQuery and am going through some very simple examples

  • 0

I have started to learn jQuery and am going through some very simple examples but have run into problems already. I am changing the body upon the click of a day button and again a different background for a night button.

What I am finding is that the click handler is only working once an if I click the night button first then the day button won’t work? Can anyone advise or share a best practice with this?

Here is the code I have so far:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
 <body>

  <h1>My Website</h1>

  <button id="first">Day</button>
  <button id="second">Night</button>



  <script>
  $(function() {
    $('button#first').click(function() {

      $('body').addClass('day');
    });
    debud

    $('button#second').click(function() {

      $('body').addClass('night');
    });

  });

  </script>
</body>
</html>

Runnable copy at http://jsbin.com/ufadul/3/edit

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This script will continue adding these classes to your body tag instead of replacing them. .night is taking priority over .day because of the position in the CSS.

    Use the following to prevent this from happening:

    $(function() {
    $('button#first').click(function() {
      $('body').removeClass('night');
      $('body').addClass('day');
    });

    $('button#second').click(function() {
      $('body').removeClass('day');
      $('body').addClass('night');
    });

  });
    • 0