CODEWITHSUNDEEP
javascriptjqueryhtmlcssonclick
Grigori
Grigori

Reputation: 49

OnClick change background color with javascript

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.

Upvotes: 1

Views: 2366

Answers (5)

mplungjan
mplungjan

Reputation: 178383

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>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115296

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>

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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.

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29317

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>

Upvotes: 2

MozzieMD
MozzieMD

Reputation: 355

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!

Upvotes: 0

Related Questions