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

Question

我正在尝试使用单选按钮更改背景颜色。 javascript 函数似乎不起作用。我已经通读了这里写的其他问题，none 这些答案似乎有效。

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

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

Answer 2

您的代码无法正常工作，因为您的函数名称是 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;
 }

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

Radio button not changing background color HTML/CSS

html

javascript

css

radio-button