我如何可以改变背景颜色，当我点击一个单选按钮

的JavaScript我如何可以改变背景颜色，当我点击一个单选按钮

<script> 
function changeColor() { 
    var element = user.elements["group1"]; 

    for (var i = 0; i < element.length; i++) { 
     if (element[i].checked == true) { 

      var newColor = element[i].value; 
      alert("hai"); 
      document.getElementById("changeColor").style.background = newColor; 

     } 
    } 
} 
</script>

HTML

<div id="color"> 
    <input type="radio" name="group1" id="color1" value="#990000" /><label  for="color1">Red</label> 
    <input type="radio" name="group1" id="color2" value="#009900" /><label for="color2">Green</label> 
    <input type="radio" name="group1" id="color3" value="#FFFF00" /><label for="color3">Yellow</label><br><br><br> 
    <button onclick="changeColor()">Change</button>

以上HTML和JavaScript代码是好的，当我点击单选按钮的背景色被改变。它工作正常。但是，我的问题是，颜色更改后，浏览器将自动刷新，这是我不想要的。

来源

2012-06-21 srinu

尝试使用 –

@Ajaybeni ...或'<按钮类型=“按钮'>' – Pointy

@Ajaybeni和Pointy是正确的，我也会清理你的JS一点点：http://jsfiddle.net/czjuP/ – Cecchi

它看起来像你的按钮是窗体中唯一的按钮，因此浏览器正在考虑它的表单提交按钮。

由于尖点说你可以添加一个类型到按钮，添加onclick函数到一个不同的元素，比如一个链接（当然锚点不是实际的链接，否则你会得到相同的问题），或者移动按钮在表单之外。

来源

2012-06-21 13:04:20

...或者使'

是的，我移动窗体外的按钮，但它不工作。请给我一个简单的例子，或者将这个问题的任何链接转给我。 – srinu

谢谢您的宝贵意见 - 尖点 – srinu

我强烈建议你使用jQuery：

HTML

<button id="btnColor">Change</button>

的jQuery：

$('#btnColor').live('click', function(e) { 
    e.preventDefault(); 
    $('#changeColor').css('background-color', $('input:radio[name=group1]:checked').val()); 
});

来源

2012-06-21 13:11:16 Ruel

我强烈建议你只有使用'jQuery'，如果你有更多的理由使用它。使用'jQuery'修补坏HTML或修复一个小问题并不是一个好的做法。 – Cecchi

你可以换的单选按钮与一个形式，这样，外界留下按钮：

<form name="form_radiobuttons"> 
    <input type="radio" name="group1" id="color1" value="#990000" /><label  for="color1">Red</label> 
    <input type="radio" name="group1" id="color2" value="#009900" /><label for="color2">Green</label> 
    <input type="radio" name="group1" id="color3" value="#FFFF00" /><label for="color3">Yellow</label><br><br><br> 
</form> 
<input type="button" onclick="changeColor()">Change</button>

这样，当您单击按钮时，表单将不会被提交。

来源

2012-06-21 13:11:26

谢谢你的例子 - Erenor Paz - – srinu

但是，你设法使它工作？这是重要的东西 –

点击提交按钮后，onclick事件将会打电话。所以如果你发布布尔值返回false那么这里不提交的页面是我使用的代码return false;

<script> 
function changeColor() { 
    var element = user.elements["group1"]; 
    for (var i = 0; i < element.length; i++) { 
     if (element[i].checked == true) { 

      var newColor = element[i].value; 
      document.getElementById("changeColor").style.backGround = newColor; 
     return false; 
     } 
    } 
} 
</script>

更改点击数事件您changeColor前添加（）函数返回

<button onclick="return changeColor();">Change</button>

来源

2013-09-02 14:20:30 Chinmay235

检查此代码，我认为它一定会奏效。 – Chinmay235

我如何可以改变背景颜色，当我点击一个单选按钮

回答

相关问题