1

純粋な JavaScript と HTML を使用してカラー ピッカーを作成しています。これは、3 つの HTML 選択 (ドロップダウン ボックス) と、JavaScript によって背景色が変更される 1 つの div で構成されます。また、これを可能な限り「正しく」実行しようとしています。これは、HTML に Javascript コードがないことを意味します。

これまでの私のコードは次のようになります。

    var red = document.getElementById('red');
    red.onchange = update();

    var green = document.getElementById('green');
    green.onchange = update();

    var blue = document.getElementById('blue');
    blue.onchange = update();

    var thebox = document.getElementById('colourbox');

    function d2h(d) {return d.toString(16);}
    function h2d(h) {return parseInt(h,16);} 

    function update(){
        finalcolor = '#' + d2h(red.value) + d2h(green.value) + d2h(blue.value)
        thebox.style.background = finalcolour;
    }

HTML は次のようになります。

<div id="colourbox"></div>
<form name="myform" action="colour.html">
    <select name="red" id="red">
        <option value="0">0</option>
        .... etc etc ....
    </select>
    <select name="green" id="red">
        <option value="0">0</option>
        .... etc etc ....
    </select>
    <select name="blue" id="red">
        <option value="0">0</option>
        .... etc etc ....
    </select>
</form>

問題は、すべての document.getElementById() 呼び出しが null を返すことです。おそらく、コードが実行された時点では存在しないためです。コードを window.onload = function() {} 内に配置しようとしましたが、a) 混乱するだけで、b) 関数内で update 関数を定義する必要がありますが、これは正しくないようです。

誰でもこれに光を当てることができますか？それがどのように機能するかを理解するのに役立つ一般的なルールはありますか? または、主題に関するいくつかの文書ですか？

編集: 改訂されたコード:

<script type="text/javascript">
    window.onload = function(){
        var red = document.getElementById('red');
        red.onchange = update();

        var green = document.getElementById('green');
        green.onchange = update();

        var blue = document.getElementById('blue');
        blue.onchange = update();

        var thebox = document.getElementById('colourbox');

        function d2h(d) {return d.toString(16);}
        function h2d(h) {return parseInt(h,16);} 

        function update(){
            var finalcolor = '#' + d2h(document.getElementById('red').value) + d2h(document.getElementById('green').value) + d2h(document.getElementById('blue').value);

            document.getElementById('colourbox').style.background = finalcolor;
        }

    }
</script>
4

2 に答える 2

3

onload イベントのハンドラーにコードを入れると問題なく動作し、広く受け入れられています。関数内に関数を配置することも同様です (理由によって異なります)。

var mypage = {
    red: null,
    green: null,
    blue: null,
    colourbox: null,

    d2h: function(d) {
        var hex = d.toString(16);
        if (hex.length < 2) {
            hex = '0' + hex;
        }
        return hex.toUpperCase();
    },

    h2d: function(d) {
        return parseInt(h, 16);
    },

    update: function() {
        mypage.colourbox.style.backgroundColor = '#' + mypage.d2h(mypage.red.value) + mypage.d2h(mypage.green.value) + mypage.d2h(mypage.blue.value);
    }
};

window.onload = function() {
    mypage.red = document.getElementById('red');
    mypage.red.onchange = mypage.update;

    mypage.green = document.getElementById('green');
    mypage.green.onchange = mypage.update;

    mypage.blue = document.getElementById('blue');
    mypage.blue.onchange = mypage.update;

    mypage.colourbox = document.getElementById('colourbox');
}

これは、window.onload の使用に関する dean edwards によるブログ投稿です。

もう 1 つのオプションは、JavaScript をページの上部ではなく下部に配置することです。

于 2010-01-15T16:58:33.937 に答える
2

他の人が言ったように、コードを関数内にラップし、window.onload イベントから呼び出す必要があります。

また、関数をイベントに割り当てるときは、名前のみ (括弧なし) を使用するか、関数がすぐに呼び出されてから ..

それで

red.onchange = update();

する必要があります

red.onchange = update;
于 2010-01-15T17:09:00.993 に答える