web-dev-qa-db-ja.com

クリックされたときにボタンの背景色を変更する

JavaScriptを使用してボタンのbackground-colorプロパティを変更しようとしています。スクリプトは、現在のbackground-colorが何に設定されているかを確認してから、切り替えます。これはJavaScriptコードです：

function btnColor(btn,color) {
    var property=document.getElementById(btn);
    if (property.style.background-color == "#f47121") {
        property.style.background-color=Color;
    }
    else {
        property.style.background-color = "#f47121";
    }
}

これは私がhtmlで渡すものです：

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','#fff200');" />

toggleLayerは、私が使用している別の関数で、完全に正常に機能します。なぜ動かないのか分かりません。

javascripthtmlbackground-color
5
ayush

JsBinで実際に動作する例を作成しました： ここにリンク

  • 関数の名前をsetColorに変更しました
  • Property.style.background-colorプロパティをwindow.getComputedStyle（property）.backgroundColorで変更しました
3
forumma

JQueryを使用しないのはなぜですか？

コアJavaScriptは非常に生です。背景色を変更するだけの場合は、jQueryでon clickイベントを使用します。

$('#btnHousing').click(function() {
    //Now just reference this button and change CSS
    $(this).css('background-color','#f47121');
});

個人的には、生のjavascriptよりもはるかに優れています。

よろしく

3
Tez Wingfield

あなたのjavascriptでこの関数を試してください：

function setColor(btn,color){
    var property=document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

Onclick属性で入力のIDが繰り返されないようにするには、次のようにします。

HTML：

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor(this, '#fff200');" />

JavaScript（変数名は大文字と小文字が区別されるので注意してください。Color=> colorを参照）：

function setColor(btn, color){
    if (btn.style.backgroundColor == "#f47121") {
        btn.style.backgroundColor = color;
    } else {
        btn.style.backgroundColor = "#f47121";
    }
}
2
Jocker

コードをこれに変更してください...

function btnColor(btn, color) {
    var property = document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = Color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

ハイフン付きのcss属性は、JSではキャメルケースです。例えば ​​background-colorは-> backgroundColorになります

上記のコードは動作するはずです。

1
Seth