问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

例如。按钮 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>

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

原文由 user3014211 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlradio-button
阅读 386
2 个回答
得票最新
社区维基
1
✓ 已被采纳

你很接近。我将事件更改为 onclick，它是 backgroundColor 而不是 Colour。这是一个例子 - 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;
}

原文由 NaNpx 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

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

  3. 使用 onclick 而不是 onblur

  4. value=“radio” 没有用

  5. color 在 javascript 中以美式英语拼写。您的函数名称可能拼写为 changeColur，但 backgroundColor 必须带有 o。这意味着你的 html 将是

<input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues

  1. 添加标签，以便用户也可以单击文本

包装在 {} 中被认为是好的做法

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>

原文由 mplungjan 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题