1

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 代码很好，背景颜色发生了变化。它工作正常。但是，我的问题是颜色更改后浏览器会自动刷新，这是我不想要的。

4

4 回答 4

1

单击提交按钮后，将调用 onclick 事件。因此，如果您发送布尔值返回 false则页面未提交这里是我使用的代码返回 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() 函数之前更改 onlick 事件添加返回

<button onclick="return changeColor();">Change</button>
于 2013-09-02T14:20:30.840 回答
0

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

正如尖尖所说，您可以向按钮添加类型，将 onclick 功能添加到不同的元素，例如链接（当然，锚不是实际链接，否则您会遇到同样的问题）或将按钮移到表单之外.

于 2012-06-21T13:04:20.100 回答
0

我强烈建议您使用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-21T13:11:16.567 回答
0

您可以使用这样的表单包装单选按钮，将按钮留在外面：

<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-21T13:11:26.467 回答