3

div の背景色を変更するなど、簡単なことを行う JavaScript 関数に div の ID を渡そうとしています。

奇妙なことに、私のコードは w3schools.com Tryit エディターでは機能しますが、JSFiddle では機能しません。また、私のコンパイラ (Coda 2) でも動作しません。

これはこれについて正しい方法ですか？これが私のコードです：

<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
    asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>

<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>

</body>
</html>

ここにJSFiddleのものがあります：http://jsfiddle.net/BH9Rs/

4

5 に答える 5

6

document.getElementByIdIDから要素を取得するために使用する必要があります

function changeBackgroundColor(asdf){
    document.getElementById(asdf).style.backgroundColor = "#fff000";
}

このようにIDを渡します（一重引用符で囲みます）

<button onclick="changeBackgroundColor('myDiv')">

そして、フィドルで関数をHeadセクション内に配置します。 (ヘッドでラップなしを選択) 左側のフレームワークと拡張オプション

JS フィドルのデモ

于 2013-10-17T19:18:11.387 に答える
1

スクリプト配置コンボをno wrap - in <head>(左パネルの 2 番目のコンボ ボックス) に変更します。

于 2013-10-17T19:20:31.403 に答える
0

インライン スタイルとインライン クリック イベント? ブー。

<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>

<script>
    document.getElementById('clickMe').onclick = function(){
        document.getElementById('myDiv').style.backgroundColor = '#fff000';
    }
</script>
于 2013-10-17T19:20:50.747 に答える
0

あなたはそうしなければなりません：

    <!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
    document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>

<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>

</body>
</html>
于 2013-10-17T19:21:27.673 に答える
0

myDiv不明な識別子です。

document.getElementById()div を参照するために使用します。

<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>

さらに、jsFiddle 環境のため、JS コードを HTML に移動する必要があります: http://jsfiddle.net/BH9Rs/1/

<script>
    function changeBackgroundColor(asdf) {
        asdf.style.backgroundColor = "#fff000";
    }
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>
于 2013-10-17T19:18:59.943 に答える