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

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 に答える
0

ボタンがフォーム内の唯一のボタンであるように見えるため、ブラウザはフォームの送信ボタンと考えています。

pointy が言うように、ボタンにタイプを追加したり、リンクなどの別の要素に onclick 関数を追加したり (もちろん、実際のリンクではなくアンカーを使用すると同じ問題が発生します)、ボタンをフォームの外に移動したりできます。 .

于 2012-06-21T13:04:20.100 に答える