我正在使用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>
on*属性处理程序，就像不使用内联style属性一样。很难调试和维护。JS应该只放在一个地方，那就是您的script。请改用Element.addEventListener（）。document.body或获取BODY元素document.querySelector("body")"input"和"keyup"活动。在上面，"keyup"我们可以使用KeyboardEvent.key推断出键-如果匹配字符串“ Delete”，则可以相应地重置输入值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>另请阅读：
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句