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

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

1. 语句之间没有 html。 删除<br>

2. 在单引号中传递值并在 function 声明中使用它

3. 使用 onclick 而不是 onblur

4. value="radio" 没用

5. 颜色在 javascript 中用美式英语拼写。 您的 function 名称可能拼写为 changeColur 但 backgroundColor 必须带有 o。 这意味着您的 html 将是
   <input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues

6. 添加 label 以便用户也可以单击文本

包装在 {} 中被认为是一种很好的做法，因此

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";
  }
}

这是我将如何编码

现场演示

<!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，它的背景颜色不是颜色。 这是一个例子 - 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

I'd strongly suggest removing your JavaScript from your HTML, and using JavaScript to bind the event-handling (which makes for more easily maintainable code, since you don't have to hunt through HTML to update/change anything; it should all be在您实现的 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 小提琴演示。

此外，我建议使用label元素包装input元素，以便单击label （文本本身）能够检查该文本的关联input ：

<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 小提琴演示。

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

function changeColour(e) {
    // sets the letter-colour options:
    var colorMap = {
        'b' : '#00f',
        'r' : '#f00',
        'p' : '#fof'
    };
    var el = e.target,
        checked = el.nextSibling.nodeValue.toLowerCase()[0];
    /* if the relevant letter is in the colorMap object
       (and generates a truthy value), we set the background-color
       to whatever is retrieved:
    */
    if (colorMap[checked]){
        this.style.backgroundColor = colorMap[checked];
    }
}

document.getElementById('genre').addEventListener('change', changeColour, true);

JS 小提琴演示。