Question

当用户输入所需颜色时，我的网站目前会更改背景颜色，但我尝试允许我的用户输入所需的关键字，该关键字会将背景更改为使用该字词指定的图像。例如，如果用户输入'tree'，背景将变为树，我只为几个关键字执行此操作，并且我使用if语句来更改背景。

问题是当用户输入其中一个关键字（例如“树”）时，他们无法再次更改背景颜色并且卡在树木的背景上。我希望用户能够重新输入颜色，背景将变为输入。

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

您正在设置2个不同的属性＆＃39; backgroundColor＆＃39;和＆＃39; backgroundImage＆＃39;。

我认为你错过的是一套背景图像＆＃39;属性将覆盖任何＆＃39; backgroundColor＆＃39;属性。

您应该能够设置＆＃39; backgroundImage＆＃39;回到＆＃39;＆＃39;或null，然后是＆＃39; backgroundColor＆＃39;应该再次可见。

尝试添加以下内容：

document.body.style.backgroundImage = null;

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

Answer 2

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

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

Answer 3

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

Bundle bundle = this.getArguments();
if (bundle != null) {
        int myInt = bundle.getInt(key);
}

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

3 个答案: