单选按钮不更改背景颜色HTML / CSS

Question

我正在尝试使用单选按钮更改背景颜色。 javascript函数似乎无法正常工作。 我已经读完了这里写的其他问题，这些答案似乎都没有用。

这是HTML代码：

 <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：

 <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>

以下是页面首次启动时的CSS代码：

 body {
     background-color: #d0e4fe;
 }

Answer 1

您的代码无法正常工作，因为您的函数名称为bgColor我将其重命名为bgcolor并且在case 'colorP'和case 'colorD'之后也缺少分号，并且现在可以正常使用了。 尝试这个

 <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功能

 <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>

和CSS

 body {
   background-color: #d0e4fe;
 }

Answer 2

 $('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>