Question

的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代码就可以了。它运作正常。但是，我的问题是，在换色后，浏览器会自动刷新，这是我不想要的。

Answer 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>

Answer 2

看起来你的按钮是表单中的唯一按钮，因此浏览器会认为它是表单的提交按钮。

正如pointy所说，你可以在按钮上添加一个类型，你可以将onclick函数添加到不同的元素，例如链接（当然，锚点不是实际链接，否则你会遇到同样的问题）或者将按钮移到外面形式。

Answer 3

我强烈建议您使用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());
});

Answer 4

你可以用一个表格包装单选按钮，如下所示，将按钮留在外面：

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

这样，单击按钮时不会提交表单。

单击单选按钮时如何更改背景颜色

4 个答案: