const log = document.getElementById("log"); document.addEventListener("keydown", logKey); function logKey(e) { if (e.key === "Shift" && "Control" && "CapsLock" && "Alt") { log.textContent += ""; } else { log.textContent += ` ${e.key}`; } console.log(e); } #para { background: #f4f4f4; color: #333; border: 1px solid blue; height: 200px; width: auto; } #log { background: #333; color: #fff; } </pre> <pre> <!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./assets/styles/log.css" /> <title>Getters and Setters</title> <script src="./assets/scripts/getter.js" defer></script> </head> <body> <div id="para"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tempora distinctio quaerat vel iusto suscipit itaque dolor ipsa ducimus commodi eos maxime nemo temporibus, molestiae maiores. Similique reiciendis temporibus aut, optio tempora modi adipisci voluptatibus aspernatur explicabo, omnis atque nesciunt. </p> </div> <div id="log"></div> </body> </html> </pre>