使用 oninput 事件更改背景主体颜色

Question

我正在与 Javascript 合作。

我需要一个输入，同时我正在写一种颜色，主体背景更改为该颜色。我还需要使用 delete 键将背景变白。

<strike>
<!DOCTYPE html>
<html>
<body>

<p>Write a color for background</p>

<input type="text" id="myInput" oninput="colorForBack()">

<p id="demo"></p>

<script>
function colorForBack() {
  var x = document.getElementById("myInput").value;
  document.getElementById("demo").innerHTML = "Your color: " + x;
  element.style.backgroundColor = x;
 
}
</script>

</body>
</html>
</strike>

Answer 1

不要使用内联 JS on* 属性处理程序，就像你不使用内联 style 属性一样。很难调试和维护。 JS 应该只在一个地方，那就是你的 script。请改用 Element.addEventListener()。
使用 document.body 或 document.querySelector("body")
监听 "input" 和 "keyup" 事件。在 "keyup" 上，我们可以使用 KeyboardEvent.key 推断出密钥 - 如果匹配字符串“Delete”，您可以相应地重置输入值
不要在您的 DOM 中插入未经处理的字符串！在您的文档中插入用户输入的字符串值时使用 Node.textContent。

const EL_body = document.body;
const EL_input = document.querySelector("#myInput");
const EL_color = document.querySelector("#demo");

function setBodyBackground(ev) {
  const isDelete = ev?.key === "Delete";
  const color = isDelete ? "transparent" : EL_input.value;
  EL_color.textContent = `Your color: ${color}`;
  EL_body.style.backgroundColor = color;
  if (isDelete) EL_input.value = ""; // Reset input value on Delete key
}

["input", "keyup"].forEach(evName => EL_input.addEventListener(evName, setBodyBackground))

<p>Write a color for background</p>
<input type="text" id="myInput">
<p id="demo"></p>

另请阅读：

使用 oninput 事件更改背景主体颜色

Using oninput event to change background body color

javascript

dom-events