OnClick change background color with javascript

Question

I have 10 cards with a "yes" and "no" button on each of them. I need to make so that people can select a yes or a no on each of them. Whenever you make a "yes" selection it's background would turn into green, but if you select "no" the "yes" would turn off and the "no" would turn red. I need to make it so that you can do it on each card without affecting the other one. This means that if I select yes on the first one and then select "no" on the second one, the "yes" on the first one should still stay selected. I found a script that does this however it affects the selection from the other cards.

You're re-using IDs...you can't do that. Probably not related though. — Paulie_D
– Paulie_D, Commented Aug 25, 2015 at 14:08
i added jquery in your snippet, id's should be unique in the document. What exactly do you want ? according to how i read your question, it works fine ? — Billy
– Billy, Commented Aug 25, 2015 at 14:13
Billy, Whenever I click on another card the previous one should not be affected. This means that if I select yes on the first one and then select "no" on the second one, the "yes" on the first one should still stay selected. — Grigori
– Grigori, Commented Aug 25, 2015 at 14:18
but you remove them $('input[type="button"]').removeClass('turnRed') — MozzieMD
– MozzieMD, Commented Aug 25, 2015 at 14:19

Mosh Feu · Accepted Answer · 2015-08-25 14:14:37Z

2

It's look like you didn't reference to the jquery library $ is not defined

$(document).ready(function () {
    $('input[type="button"]').click(function() {
      $('input[type="button"]').attr('class', '');
      if ($(this).val().toLowerCase() == 'yes') {
        $(this).attr('class', 'turnGreen');
      }
      else {
        $(this).attr('class', 'turnRed');
      }
	});
});

.turnRed {
   background-color: red;
  }

.turnGreen {
   background-color: green;
  }

.turnDefault {
   background-color: #CCC;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card1">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>


<div class="card2">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>


<div class="card3">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>

<div class="card4">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>

edited Aug 25, 2015 at 14:14

answered Aug 25, 2015 at 14:10

Mosh Feu

29.5k18 gold badges94 silver badges142 bronze badges

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

4 Comments

Grigori Over a year ago

I did reference in the original document but that's not the issue. This function just does not do the right thing.

mplungjan Over a year ago

I suggest you do not use the latest jQuery in case someone is using IE

mplungjan Over a year ago

Also you remove the complete class?

Mosh Feu Over a year ago

In this case I do, because there is no reason to not do this.

Paulie_D · Accepted Answer · 2015-08-25 14:20:33Z

2

I believe this is the effect you are looking for.

$(document).ready(function () {
    $('input[type="button"]').click(function(){
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
	});
});

.card input.active:nth-of-type(1) {
  background: green;
}

.card input.active:nth-of-type(2) {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

<div class="card">
  <input type="button"  value="YES"/> 
  <input type="button"  value="NO"/>
</div>

answered Aug 25, 2015 at 14:20

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

2 Comments

mplungjan Over a year ago

nth-of-type >= IE 9 - but I like the sibling

Paulie_D Over a year ago

Yeah but there's loads of ways to do the CSS. I just used one. Could have given them different classes and done it that way but this seems tidier somehow.

mplungjan · Accepted Answer · 2015-08-25 14:24:53Z

1

Like this?

DEMO

$(function () {
    $('input[type="button"]').click(function () {
        var idx = this.id.split("_")[1];
        if (this.value=="NO") {
            $("#yes_"+idx).removeClass('turnGreen');
            $(this).addClass('turnRed');
        }
        else {
            $("#no_"+idx).removeClass('turnRed');
            $(this).addClass('turnGreen');
        }    
    });
});

.turnRed {
    background-color: red;
}
.turnGreen {
    background-color: green;
}
.turnDefault {
    background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card1">
    <input type="button" id="yes_0" value="YES" />
    <input type="button" id="no_0" value="NO" />
</div>
<div class="card2">
    <input type="button" id="yes_1" value="YES" />
    <input type="button" id="no_1" value="NO" />
</div>
<div class="card3">
    <input type="button" id="yes_2" value="YES" />
    <input type="button" id="no_2" value="NO" />
</div>
<div class="card4">
    <input type="button" id="yes_3" value="YES" />
    <input type="button" id="no_3" value="NO" />
</div>

edited Aug 25, 2015 at 14:24

answered Aug 25, 2015 at 14:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

mplungjan Over a year ago

Yes it does, Just missed the CSS. You are amazingly fast on the downvote aren't you? See the fiddle

Paulie_D Over a year ago

I removed the DV...Did forget to add JQ in SO?

Zakaria Acharki · Accepted Answer · 2015-08-25 14:17:39Z

Take a look at Working fiddle (Tested in Mozzila & Chrome & Internet Explorer).

You have to change yes/no ids by classes because id should be unique in current document :

HTML :

<div class="card1">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>


<div class="card2">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>


<div class="card3">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>

<div class="card4">
  <input type="button"  class="yes" value="YES"/> 
  <input type="button" class="no" value="NO"/>
</div>

JS :

$('input[type="button"]').click(function(){
    if($(this).hasClass('no')){
        $(this).addClass('turnRed');
        $(this).parent().find('.yes').removeClass('turnGreen');
    }else{
        $(this).addClass('turnGreen');
        $(this).parent().find('.no').removeClass('turnRed');
    }
});

Hope this helps.

MozzieMD · Accepted Answer · 2015-08-25 14:13:31Z

0

Just rename ID's, you can't use the same id to more elements http://jsfiddle.net/f4o564j1/

<div class="card1">
  <input type="button"  id="yes" value="YES"/> 
  <input type="button" id="no" value="NO"/>
</div>


<div class="card2">
  <input type="button"  id="yes1" value="YES"/> 
  <input type="button" id="no1" value="NO"/>
</div>


<div class="card3">
  <input type="button"  id="yes2" value="YES"/> 
  <input type="button" id="no2" value="NO"/>
</div>

<div class="card4">
  <input type="button"  id="yes3" value="YES"/> 
  <input type="button" id="no3" value="NO"/>
</div>

and reference Jquery!

edited Aug 25, 2015 at 14:13

answered Aug 25, 2015 at 14:12

MozzieMD

3552 silver badges13 bronze badges

5 Comments

MozzieMD Over a year ago

Depends in what browser you check! In last chrome it works fine! No reason to down vote!

MozzieMD Over a year ago

Maybe the owner can explain in what browser he trying to make it work!

Grigori Over a year ago

I did not downvote. The thing is that it works but the function it does is different than the result I want to achieve.

MozzieMD Over a year ago

Not you, @Paulie_D, tell me please in what browser you are working?

Paulie_D Over a year ago

I'm using Chrome. The "Yes" button do not turn green. They turn red.

Collectives™ on Stack Overflow

OnClick change background color with javascript

5 Answers 5

4 Comments

2 Comments

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related