事件处理函数答案

【问题标题】：Event handling function事件处理函数
【发布时间】：2021-10-07 16:22:55
【问题描述】：

在任务中，你需要在按G键的时候将方块的背景颜色改为绿色，但是没有任何改变。

<body>
<div id="colorOutput">
</div>

<script>
   let div = document.querySelector("#colorOutput");
   document.addEventListener("keydown", function (event) {
        if (event.code == "Enter") changeToGreen();
    })
   function changeToGreen() {
       div.style.backgroundСolor = "green";
   }
</script>

【问题讨论】：

backgroundСolor С 不是 C 在控制台中运行 console.log(escape("С"), escape("C"))
你的 div 是空的，所以这个元素不能处理任何键盘事件
除了这两点之外，如果用户按下 G，code 属性将不等于 "Enter"！
@epascarello 哦哇！你到底是怎么发现的？？
@JeremyThille 去编辑问题，在编辑器中看到了时髦的 C

标签： javascript event-handling

【解决方案1】：

尝试使用下面的 JS 代码。

const div = document.getElementById("colorOutput");
window.addEventListener("keydown", (e)=>{
    e.code === "Enter" ? changeToGreen() : null;
});
function changeToGreen() {
       alert("JAI HARI");
       div.style.backgroundСolor = "green";
   }

使用window 而不是document 作为事件监听器。

【讨论】：