javascript - JavaScript 入力ベースの背景変更?

Question

私の機能は以前は機能していましたが、現在は機能しません。入力を空白のままにすると、デフォルトの背景色に戻るifステートメントを追加しようとしています。

var path = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/g;

function col(obj) {
    var val = obj.value;
    if (path.test(val)) {
        document.body.style.backgroundColor = '#' + val;
    }
}

window.onload = function () {
    document.getElementById('bgcol').onkeyup = function () {
        col(this);
    }
    if (getElementById('bgcol'.value = null || ""){
    document.body.style.backgroundColor = '#000000';
}
}

//javascript を終了し、以下の html を開始します

 <input id="bgcol" placeholder="enter hexadecimal color"></input>

Answer 1

働くフィドル

if (getElementById('bgcol').value == "") {

と

document.getElementById('bgcol').onkeyup = function () {
    if (this.value == ""){
       document.body.style.backgroundColor = '#000000';
    }
    else {
       col(this);
    }
}

と

<input id="bgcol" placeholder="enter hexadecimal color" />

Answer 2

document.getElementById構文をクリーンアップする必要があります。

if ( document.getElementById('bgcol').value == null || document.getElementById('bgcol').value == "")

Answer 3

コードのこの単純化されたバージョンを試してください。

window.onload = function() {
    document.getElementById('bgcol').onkeyup = function() {
        var col = this.value;
        if( !col.match(/^#?(?:[0-9a-f]{3}){1,2}$/i)) col = "#000000";
        if( col.charAt(0) != "#") col = "#"+col;
        document.body.style.backgroundColor = col;
    };
};

より単純な正規表現を使用し、#を受け入れてオプションにすることもできます。