使用单选按钮更改背景颜色 [英] Change background color using radio buttons

问题描述

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

我希望单选按钮改变背景颜色（每个都有不同的值）

例如。按钮1变为红色，而将其更改为蓝色。

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

 < div id =genre> 
你在做什么？ 
< form name =musicmethod =postaction => 
< p> 
< input type =radioname =musicvalue =radioonBlur =changeColour（b）> Blues 
< input type = musicvalue =radioonBlur =changeColour（r）> Rock 
< input type =radioname =musicvalue =radioonBlur =changeColour（p ）> Pop 
< / form> 
< / div> 
  

我对此很陌生，因此欢迎任何帮助。谢谢。

解决方案

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

 < div id =genre> 
你在做什么？ 
< br> 
< br> 
< form name =musicmethod =postaction => 
< p> 
< input type =radioname =musicvalue =radioonClick =changeColour（'b'）>蓝调
< br> 
< input type =radioname =musicvalue =radioonClick =changeColour（'r'）> Rock 
< br> 
< input>radioname =musicvalue =radioonClick =changeColour（'p'）> Pop 
< br> 
< / form> 
< / div> 
 
 
 function changeColour（value）
 {
 var color = document.body.style.backgroundColor; 
 switch（value）
 {
 case'b'：
 color =＃FF0000; 
休息; 
案例'r'：
 color =＃0000FF; 
休息; 
案例'p'：
 color =＃FF00FF; 
休息; 
} 
 document.body.style.backgroundColor = color; 
} 
  

I am creating a form that uses radio buttons for one of my questions.

I wish for the radio buttons to change the background colour (each holding a different value)
eg. button 1 changes to red while 2. changes it to blue.

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>

I am new to this so any help is welcome. Thanks.

解决方案

You were close. I changed events to onclick and it's backgroundColor not Colour. Here's an example - 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;
}

这篇关于使用单选按钮更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！