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

Working Fiddle

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

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

基于JavaScript输入的背景变化？

3 个答案: