Question 236179 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to toggle data-theme value on click

So I have set up a light and dark theme using variables in css and I want my toggle to change the data theme from "light" to "dark" – how do I do this?

JS

$(document).ready("#toggle_checkbox").click(function() {
    $('body').attr('data-theme', $('body').attr('data-theme') == 'light' ? 'dark' : 'light')
    });

HTML

<body data-theme="light">
    <input type="checkbox" id="toggle_checkbox">
      <label for="toggle_checkbox" onclick="">
          <div id="star">
            <div class="star" id="star-1"></div>
          </div>
      </label>
</body>

Could someone help me understand where I’m going wrong?

I’ve tried applying the above JS but the click is applied to the whole page (I can click anywhere and it will change the theme) instead of clicking on the input itself.

Tags:

2

Answers


  1. 0 
    <body data-theme="light">
  <input type="checkbox" id="toggle_checkbox">
  <label for="toggle_checkbox">
    <div id="star">
      <div class="star" id="star-1"></div>
    </div>
  </label>

  <script>
    $(document).ready(function() {
      $("#toggle_checkbox").click(function() {
        $('body').attr('data-theme', $('body').attr('data-theme') === 'light' ? 
'dark' : 'light');
      });
    });
  </script>
</body>

    In this corrected version, I’ve made sure that the click event is bound to the #toggle_checkbox element within the $(document).ready() function. This ensures that the event binding only occurs after the page has finished loading.

    When the checkbox is clicked, the code uses the .attr() method to toggle the value of the data-theme attribute between ‘light’ and ‘dark’. The ternary operator (… ? … : …) is used to achieve this toggle behavior.

    Login or Signup to reply.
  2. 0

    This would work and be shorter

    $(function() {
  $("#toggle_checkbox").on("click", () => {
    $('body').toggleClass("dark",this.checked)
  });
});
    .light { background-color: white;}
.dark { background-color: black;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<body class="light">
  <input type="checkbox" id="toggle_checkbox">
</body>

    If you wanted shades of gray, you could do

    $(function() {
  const $spans = $("#star span")
    .on("click", function() {
    const cls = this.id;
    $spans.each(function() { $("body").removeClass(this.id)})
    $("body").addClass(cls)
  });
});
    .light {
  background-color: white;
}

#star { padding: 0 }

#star span { margin: 0; font-size:36px; }
.star0 {
  background-color: white;
  color:black;
}
.star1 {
  background-color: grey;
  color:white;  
}
.star2 {
  background-color: darkgrey;
  color:white;  
}
.star3 {
  background-color: black;
  color:white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<body class="star0">
  <div id="star">
    <span class="star0" id="star0">*</span><span class="star1" id="star1">*</span><span class="star2" id="star2">*</span><span class="star3" id="star3">*</span>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search