一旦图像被选择JS，无法重新输入颜色

Question

当用户输入所需的颜色时，我的网站当前会改变背景颜色，尽管我试图允许我的用户输入一个想要的关键字，该关键字将将背景更改为与该单词指定的图像。例如，如果用户输入的“树”背景将更改为树，我只对几个关键字这样做，并且我使用if语句来更改背景。

问题是当用户输入这些关键词中的一个，比如“树”时，他们无法再次改变背景颜色，而只能停留在树的背景上。我希望用户能够重新输入一个颜色和背景将更改为输入。

缺陷视频(可流)

实时链接(Codepen)

HTML

<input type="text" name="userinput" class="userinputclass" id="textinput" placeholder='Enter Your color/hex/rgb here...' onkeypress="process(event, this)" />
<input type="button" value="Change Color" onclick="changeColor();"/>

JS

function process(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) { //Enter keycode
    changeColor();
  }
}
function changeColor() {
  var input = document.getElementById('textinput').value;
  document.body.style.backgroundColor = input;

  if (input == '') {
    document.body.style.backgroundColor = rand;
  }
  if (input == 'tree') { 
    document.body.style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg')";
  }
}

Answer 1

为任何与“树”不匹配的条目设置null将解决您的问题。您将能够再次输入颜色的值。

if (input == 'tree') { 
    document.body.style.backgroundImage = "url('...')";
} else {
    document.body.style.backgroundImage = null;
}

Answer 2

您正在设置两个不同的属性“backgroundColor”和“backgroundImage”。

我认为您缺少的是集合'backgroundImage‘属性将覆盖任何'backgroundColor’属性。

您应该能够将'backgroundImage‘设置为'’或null‘，然后'backgroundColor’将再次可见。

尝试添加如下这样的内容：

document.body.style.backgroundImage = null;

到changeColor函数的顶部，以确保始终重置。

Answer 3

设置树图像后，不删除背景图像。

  function changeColor() {
      var input = document.getElementById('textinput').value;
        document.body.style.backgroundImage = null;
        document.body.style.backgroundColor = null;
       if (input == 'tree') { 
          document.body.style.backgroundImage = 
                 "url(keep ur link)";
           } else {
            document.body.style.backgroundColor = input;
        }
       }