CODEWITHSUNDEEP
javascripthtmlcssradio-button
Tammytee
Tammytee

Reputation: 632

Radio button not changing background color HTML/CSS

I'm trying to change the background color using radio buttons. The javascript function seems to not be working. I already read through the other questions written here, none of those answers seemed to work.

Here's the HTML code:

 <form action="">

    <input type="radio" name="color" value="radio"  onchange= "bgColor('colorR')">Red
    <input type="radio" name="color"  value="radio" onchange= "bgColor('colorG')"> Green
    <input type="radio" name="color"  value="radio" onchange= "bgColor('colorP')"> Purple
    <input type="radio" name="color"  value="radio" onchange= "bgColor('colorD')"> Default

</form>

Here's the Javascript:

 <script>

  function bgColor(col){

switch(col){

    case 'colorR':
        document.body.style.backgroundColor  = "red";
        break;

    case 'colorG':
         document.body.style.backgroundColor  = "green";
         break;

    case 'colorP'
          document.body.style.backgroundColor  = "purple";
          break;

    case 'colorD'
          document.body.style.backgroundColor  = "#d0e4fe";
          break;


     }
 }

 </script>

Here's the CSS code for when the page first launches:

 body {
     background-color: #d0e4fe;
 }

Upvotes: 0

Views: 956

Answers (2)

viks
viks

Reputation: 1408

Your code is not working because your function name is bgColor i have renamed it to bgcolor and you also missing semi-colon after case 'colorP' and case 'colorD' and now its working fine. Try this

 <form action="">
  <input type="radio" name="color" value="radio"  onchange= "bgcolor('colorR')"> Red
  <input type="radio" name="color"  value="radio" onchange= "bgcolor('colorG')"> Green
  <input type="radio" name="color"  value="radio" onchange= "bgcolor('colorP')"> Purple
  <input type="radio" name="color"  value="radio" onchange= "bgcolor('colorD')"> Default
</form>

JavaScript function

 <script>
  function bgcolor(col){
    switch(col){
      case 'colorR':
        document.body.style.backgroundColor  = "red";
        break;
      case 'colorG':
        document.body.style.backgroundColor  = "green";
        break;
      case 'colorP' :
        document.body.style.backgroundColor  = "purple";
        break;
      case 'colorD':
        document.body.style.backgroundColor  = "#d0e4fe";
        break;
    }
 };
</script>

and css

 body {
   background-color: #d0e4fe;
 }

Upvotes: 1

imGaurav
imGaurav

Reputation: 1053

$('input:radio').click(function() {
  var color = $(this).val();
  $('body').css("background-color", color);

});
 body {
   background-color: #d0e4fe;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">

  <input type="radio" name="color" value="red">Red
  <input type="radio" name="color" value="green">Green
  <input type="radio" name="color" value="purple">Purple
  <input type="radio" name="color" value="#d0e4fe">Default

</form>

Upvotes: 0

Related Questions