javascript - 选择图像后无法重新输入颜色 JS

Question

我的网站目前会在用户输入所需颜色时更改背景颜色，尽管我试图让我的用户输入所需的关键字，该关键字会将背景更改为用该词指定的图像。例如，如果用户输入“树”，背景将变为树，我只对几个关键字执行此操作，并且我使用 if 语句来更改背景。

问题是，当用户输入这些关键字之一(例如“树”)时，他们无法再次更改背景颜色并卡在树的背景上。我希望用户能够重新输入颜色，背景将更改为输入颜色。

Video of the bug (Streamable)

Live link (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;
}