Creating an online editing interface for coursework where keyboard events are used. The goal is to have the tab key insert text, while also reducing the size of the text on that line. However, upon using getElementById, an error message pops up stating: Cannot read property 'style' of null. Any suggestions on how to tackle this issue?
<!DOCTYPE html>
<html>
<head>
<title>Editing Tool</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>