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;
    };
};

它使用更简单的正则表达式，还允许#接受和可选。