Chapter 23 Studio: The DOM and Events

I have not been able to move the rocket image for the studio with dot notation and subtraction/addition. I was able to move the shuttle background by 10px, but it would only happen for the first time the button is clicked.

I browsed through the course materials and Stack Overflow, but the approaches I’ve seen tend to focus on moving an image continuously (animation vs. an update in the image’s position). What methods are best for accessing the rocket’s position?

UPDATE: I figured it out, I think. I created a rule for the rocket, setting its position to absolute, and gave left and top random settings. For each button event listener, I adjusted the top and left properties subtracting or adding 10px from offsetTop or offsetLeft. I am probably not explaining it well. Initially, I had the right idea in mind, but I tried to use rocket.style.right and rocket.style.bottom. As far as I know of, offsetRight and offsetBottom don’t exist.

Now, I have to figure out how to prevent the image from flying off the background.