Javascript: onClick checkbox change div color

Question

I've a check-box inside div.

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1)">Sample question text
</div>

I'm trying to toggle the background color of div whenever checkbox is checked or unchecked, which is not working.

Here is the complete code

However, implementing same code without toggle logic is working fine - link

Kindly suggest what could be going wrong.

Rayon · Accepted Answer · 2015-10-16 06:31:03Z

5

The problem is that x.style.backgroundColor will return color's value only if it is set as inline style. And it will return rgb, not hex. You should better make the verification based on checked attribute of the checkbox:

<div id="question_text_1">
    <input type="checkbox" onChange="myFunction(question_text_1, this)">Sample question text
</div>

function myFunction(x, _this) {
    x.style.backgroundColor = _this.checked ? '#0000FF' : '#FF0000';
}

http://codepen.io/anon/pen/avLrze

edited Oct 16, 2015 at 6:31

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

answered Oct 16, 2015 at 5:31

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:24:25Z

The code doesn't work because x.style.backgroundColor always returns ''- empty string and else block is executed.

To get the values see How to get an HTML element's style values in javascript?

You can achieve this using CSS, no need of using Javascript

Wrap the text associated with the checkbox in label element
Use :checked property of the checkbox to apply styles when the checkbox is checked
Use adjacent sibling selector(+), on checked checkbox to set styles on the label

:checked + label {
  color: green;
  font-weight: bold;
}

<div id="question_text_1">
  <input type="checkbox" id="check1">
  <label for="check1">Sample question text</label>
</div>

If you want to use Javascript, use classList

Create a class with desired styles to be applied when checked
Use !important to override styles in the class as the id selector have higher specificity
Use classList.toggle to toggle class

Updated Pen

function myFunction(x) {
  x.classList.toggle('blue');
}

#question_text_1 {
  background-color: #FF0000;
  padding: 7px;
  margin: 7px;
}
.blue {
  background-color: #00f !important;
}

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1)">Sample question text
</div>

Community · Accepted Answer · 2017-05-23 12:01:43Z

1

please change you code like below,It works fine

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1,this)">Sample question text
</div>

 function myFunction(x,y) {
  if (y.checked)
      x.style.backgroundColor = '#0000FF';
  else
      x.style.backgroundColor = '#FF0000';
}

You can not directly compare div background color with value of color because for it you must have to declare variable of color related to different browser for that visit this link How to compare a backgroundColor in Javascript?

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Oct 16, 2015 at 5:42

Rita Chavda

1912 silver badges17 bronze badges

Comments

Touqeer Shafi · Accepted Answer · 2015-10-16 05:16:21Z

0

You can try it with jQuery like this:

HTML

<input type="checkbox" id="my_checkbox"/>
<div id="toggle_color">Color Will change here</div>

jQuery

jQuery(document).ready(function($){
    $('#my_checkbox').on('change', function(){
        if($(this).is(':checked')){
           $("#toggle_color").css('background-color',"red");
        } else {
            $("#toggle_color").css('background-color',"#fff");
        }
    })
})

Checkout the jsfiddle.

answered Oct 16, 2015 at 5:16

Touqeer Shafi

5,3043 gold badges31 silver badges48 bronze badges

Comments

Anshul · Accepted Answer · 2015-10-16 05:36:52Z

0

Instead of x.style.backgroundColor in if condition use window.getComputedStyle(x).backgroundColor and compare with 'rgb' equivalent of colors.

function myFunction(x) {
 if (window.getComputedStyle(x).backgroundColor == "rgb(255, 0, 0)") {
    x.style.backgroundColor = '#0000FF';
 } else if (window.getComputedStyle(x).backgroundColor == "rgb(0, 0, 255)"){
    x.style.backgroundColor = '#FF0000';
 }
}

Hope this helps.

Thanks

answered Oct 16, 2015 at 5:36

Anshul

6979 silver badges18 bronze badges

4 Comments

Rayon Over a year ago

Dont you think it will be an expensive operation ?

Anshul Over a year ago

This may be slow but works in most of the cases for pure javascript. If you can use jQuery - go with .css property. Check this link for performance jsperf.com/getcomputedstyle-vs-style-vs-css/2

Rayon Over a year ago

How about this.checked ?

Anshul Over a year ago

Yes that will work. We need to have conditional function to change background color when checked. But question was about what could be used in place of style.backgroundColor so I gave an option of window.getComputedStyle.

Collectives™ on Stack Overflow

Javascript: onClick checkbox change div color

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related