Don't use getComputedStyle

jackoconnordev · jackoconnordev · commit c75a449a3847 · 2023-10-21T14:11:03.000+01:00
diff --git a/classes/sonic-speed/index.html b/classes/sonic-speed/index.html
@@ -12,8 +12,8 @@
   <h1>Press an arrow key to move Sonic</h1>
   <img id="sonic-running" src="./assets/sonic-running.gif">
 
-  <!-- <script src="./script.js"></script> -->
   <script src="./script.js"></script>
+  <!-- <script src="./script2.js"></script> -->
 </body>
 
 </html>
diff --git a/classes/sonic-speed/script.js b/classes/sonic-speed/script.js
@@ -2,24 +2,28 @@
 const stepSize = 200;
 const sonicGif = document.getElementById('sonic-running');
 
+sonicGif.style.marginTop = 0;
+sonicGif.style.marginLeft = 0;
+
 // Create functions which move Sonic around page using margins
 function moveSonicDown() {
-  const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop);
+  const currentMarginTop = parseInt(sonicGif.style.marginTop);
   sonicGif.style.marginTop = (currentMarginTop + stepSize) + 'px';
 }
 
 function moveSonicUp() {
-  const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop);
+  const currentMarginTop = parseInt(sonicGif.sytle.marginTop);
   sonicGif.style.marginTop = (currentMarginTop - stepSize) + 'px';
 }
 
 function moveSonicRight() {
-  const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft);
+  const currentMarginLeft = parseInt(sonicGif.style.marginLeft);
+  console.log(currentMarginLeft)
   sonicGif.style.marginLeft = (currentMarginLeft + stepSize) + 'px';
 }
 
 function moveSonicLeft() {
-  const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft);
+  const currentMarginLeft = parseInt(sonicGif.style.marginLeft);
   sonicGif.style.marginLeft = (currentMarginLeft - stepSize) + 'px';
 }
 
diff --git a/classes/sonic-speed/script2.js b/classes/sonic-speed/script2.js
@@ -0,0 +1,17 @@
+const sonicImage = document.getElementById('sonic-running');
+
+// sonicImage.style.height = '600px';
+document.onkeydown = function(event) {
+  if (event.key === 'ArrowDown') {
+    sonicImage.style.marginTop = '300px';
+  }
+  if (event.key === 'ArrowUp') {
+    sonicImage.style.marginTop = ' 0px';
+  }
+  if (event.key === 'ArrowRight') {
+    sonicImage.style.marginLeft = '300px';
+  }
+  if (event.key === 'ArrowLeft') {
+    sonicImage.style.marginLeft = '0px';
+  }
+}
