When I click on the arrow keys, it appears that the console notices that the keys are being pressed but it doesn't respond by moving the object I want to move. It has an issue reading "x" and "z". For example, the console states: "Uncaught TypeError: Cannot read properties of undefined (reading 'x') at HTMLDocument.document.onkeydown".
Please check out my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Practice</title>
<style>
...
.purp {
background-color: violet;
width: 250px;
text-align: center;
padding: 5px;
border: 5px solid aqua;
float: left;
}
...
</style>
<script>
var purp = document.getElementsByClassName ("purp");
document.onkeydown = function (move) {
if (move.keyCode == 37) {
purp.position.x -= 1;
}
else if (move.keyCode == 39) {
purp.position.x += 1;
}
else if (move.keyCode == 38) {
purp.position.z -= 1;
}
else if (move.keyCode == 40) {
purp.position.z += 1;
}
};
</script>
</head>
<body>
...
<side-menu class='purp'>
<div>
<h2>ngfsndkgnsdkfng</h2>
<p>fdkmgsdlfgmdflkggelkgdlfkmgdlkf</p>
<p>dfgjdgorkgjeogmoggkmdlfkbmsdkgfmkfmgkggkn</p>
</div>
</side-menu>
...
</body>
</html>