Question

我正在为我的一个问题创建一个使用单选按钮的表单。

我希望单选按钮改变背景颜色（每个按钮保持不同的值）
如。按钮1变为红色，而2.将其变为蓝色。

的JavaScript

function changeColour() {
    if("r")
        document.body.style.backgroundColour="#FF0000";
    if("b")
        document.body.style.backgroundColour="#0000FF";
    if("p")
        document.body.style.backgroundColour="#FF00FF";
}

HTML

<div id= "genre">
    What do you bust a move to?
    <form name="music" method="post" action="">
        <p>
        <input type="radio" name="music" value="radio" onBlur="changeColour("b")">Blues
        <input type="radio" name="music" value="radio" onBlur="changeColour("r")">Rock
        <input type="radio" name="music" value="radio" onBlur="changeColour("p")">Pop
    </form>
</div>

我是新手，所以欢迎任何帮助。感谢。

Answer 1

语句之间没有html。删除<br>
以单引号传递值并在函数声明
使用onclick而不是onblur
value =“radio”无效
在javascript中用美式英语拼写颜色。您的函数名称可以拼写为changeColur，但backgroundColor必须为o。这意味着你的HTML将是 <input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues
添加标签，以便用户也可以点击文字

包含{}所以

function changeColour(val) {
  var styleBgCol = document.body.style.backgroundColour; 
  if (val=="r") {
    styleBgCol ="#FF0000";
  }
  else if (val=="b") {
    styleBgCol="#0000FF";
  }
  else if (val=="p") {
    styleBgCol="#FF00FF";
  }
}

以下是我将如何编码

Live Demo

<!doctype html>
<html>
<head>
<meta charset="utf.8" />
<title>Rock 'n Roll</title>
<script>
var cols = {
  "r":"#FF0000",
  "b":"#0000FF",
  "p":"#FF00FF"
} // no comma after the last
window.onload=function() { // when the page loads
  var rads = document.getElementsByName("music"); // all rads named music
  for (var i=0;i<rads.length;i++) {
    rads[i].onclick=function() {
      document.body.style.backgroundColor=cols[this.value];
    }
  }
}
</script>
</head>
<body>
<div id= "genre">
  What do you bust a move to?
  <br>
  <br>
  <form name="music" method="post" action="">
  <input type="radio" name="music" id="bRad" value="b"><label for="bRad">Blues</label>
  <br>
  <input type="radio" name="music" id="rRad" value="r"><label for="rRad">Rock</label>
  <br>
  <input type="radio" name="music" id="pRad" value="p"><label for="pRad">Pop</label>
  <br>
  <br>
  </form>
</div>
</body>
</html>

Answer 2

你很亲密。我将事件更改为onclick，它的backgroundColor不是Color。这是一个例子 - http://jsfiddle.net/6jt8h/

<div id= "genre">
What do you bust a move to?
<br>
<br>
<form name="music" method="post" action="">
<p>
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop
<br>
</form>
</div>


function changeColour(value)
{
    var color = document.body.style.backgroundColor;
    switch(value)
    {
        case 'b':
            color = "#FF0000";
        break;
        case 'r':
            color = "#0000FF";
        break;
        case 'p':
            color = "#FF00FF";
        break;
    }
    document.body.style.backgroundColor = color;
}

Answer 3

应该是这样的：

<form name="music" method="post" action="">
<p>
<input type="radio" name="music" value="radio" onBlur="changeColour('b');">Blues
<br>
<input type="radio" name="music" value="radio" onBlur="changeColour('r');">Rock
<br>
<input type="radio" name="music" value="radio" onBlur="changeColour('p');">Pop
<br>
</form>


function changeColour(color) {
  if(color=="r"){
    document.body.style.backgroundColour="#FF0000";
  }else if(color=="b"){
    document.body.style.backgroundColour="#0000FF";
  }else if(color=="p"){
     document.body.style.backgroundColour="#FF00FF";
  }
}

Answer 4

我强烈建议您从HTML中删除JavaScript，并使用JavaScript绑定事件处理（这样可以更轻松地维护代码，因为您不必通过HTML来更新/更改任何内容;它应该都在你实现的JavaScript文件/库中。也就是说，我建议使用以下HTML：

<div id="genre">What do you bust a move to?
    <form name="music" method="post" action="#">
        <input type="radio" name="music" value="radio"/>Blues
        <input type="radio" name="music" value="radio" />Rock
        <input type="radio" name="music" value="radio" />Pop</form>
</div>

使用以下JavaScript：

function changeColour (e) {
    // e.target is the element that triggered the event we're reacting to:
    var el = e.target;
    /* el.nextSibling.nodeValue is the text of the next sibling-node,
       toLowerCase() turns that text into lower-case,
       [0] gets the first letter of that text:
    */
    switch (el.nextSibling.nodeValue.toLowerCase()[0]) {
        case 'b' :
            // 'this' is the element that's handling the event (the div):
            this.style.backgroundColor = '#00f';
            break;
        case 'r' :
            this.style.backgroundColor = '#f00';
            break;
        case 'p' :
            this.style.backgroundColor = '#f0f';
            break;
    }
}

/* gets the element with the id of 'genre', and adds a listener to that
   element, listening for the change event, and triggering the 'changeColour' 
   function when it's detected:
*/
document.getElementById('genre').addEventListener('change', changeColour, true);

JS Fiddle demo

此外，我建议用input个元素包装label个元素，以便点击label（文本本身）能够检查相关的{{1对于那个文本：

input

JS Fiddle demo

也可以使用JavaScript对象将选项与颜色相关联，例如：

<div id="genre">What do you bust a move to?
    <form name="music" method="post" action="#">
        <label>
            <input type="radio" name="music" value="radio" />Blues</label>
        <label>
            <input type="radio" name="music" value="radio" />Rock</label>
        <label>
            <input type="radio" name="music" value="radio" />Pop</label>
    </form>
</div>

JS Fiddle demo

使用单选按钮更改背景颜色

4 个答案: