<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript</title>
  <style>
    section {
      text-align: center;
    }
    #block {
      display: inline-block;
      width: 150px;
      height: 150px;
      margin-top: 100px;
      background-color: #990000;
    }
  </style>
  <script>
    function detectkey(event) {
      const element = document.getElementById("block");
      const code = event.key;
      switch (code) {
        case "0":
          element.style.backgroundColor = "#990000";
          break;
        case "1":
          element.style.backgroundColor = "#009900";
          break;
        case "2":
          element.style.backgroundColor = "#000099";
          break;
        case "3":
          element.style.backgroundColor = "#999900";
          break;
        case "4":
          element.style.backgroundColor = "#009999";
          break;
        case "5":
          element.style.backgroundColor = "#990099";
          break;
      }
    }
    window.addEventListener("keydown", detectkey);
  </script>
</head>
<body>
  <section>
    <div id="block"></div>
  </section>
</body>
</html>