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

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

javascript

Javascript 使用oninput事件更改背景主体颜色,javascript,dom-events,Javascript,Dom Events,我正在使用Javascript 我需要一个输入，在我写一个颜色的同时，身体背景会变成那个颜色。我还需要背景去删除键白色为背景写一个颜色函数colorForBack（）{ var x=document.getElementById（“myInput”）.value； document.getElementById（“demo”）.innerHTML=“您的颜色：”+x； element.style.backgroundColor=x； } 不要在*属性处理程序上使用内联JS，就像不要使用

我正在使用Javascript

我需要一个输入，在我写一个颜色的同时，身体背景会变成那个颜色。我还需要背景去删除键白色


为背景写一个颜色

函数colorForBack（）{
var x=document.getElementById（“myInput”）.value；
document.getElementById（“demo”）.innerHTML=“您的颜色：”+x；
element.style.backgroundColor=x；
}

不要在*属性处理程序上使用内联JS

，就像不要使用内联样式
属性一样。很难调试和维护。JS应该只在一个地方，那就是你的脚本。改用


使用document.BODY
或document.querySelector（“BODY”）
收听“输入”
和“键控”
事件。在“keyup”
上，我们可以使用-推断键，如果匹配字符串“Delete”，则可以相应地重置输入值
不要在DOM中插入未初始化的字符串！将用户输入字符串值插入文档时使用



const EL_body=document.body；
const EL_input=document.querySelector（“#myInput”）；
const EL_color=document.querySelector（“演示”）；
功能设置背景（ev）{
const isDelete=ev？.key==“删除”；
const color=isDelete？“透明”：EL_input.value；
elu color.textContent=`您的颜色：${color}`；
EL_body.style.backgroundColor=颜色；
if（isDelete）EL_input.value=“；//在删除键上重置输入值
}
[“输入”，“键控”].forEach（evName=>EL_输入.addEventListener（evName，setBodyBackground））
为背景写一种颜色
为什么将
作为
包装器？不知道。谢谢大家!<代码>元素什么是元素

？你是说

document.body

？是的。我错了。文件

<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>