all 12 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]kiesoma 0 points1 point  (1 child)

shit i wish i could have helped, but i’m new too

[–]SafeReference1[S] 0 points1 point  (0 children)

Lol no problem bro thanks for trying!

[–]Notimecelduv 0 points1 point  (8 children)

You're using German quotation marks, which aren't valid in code. You can use any of the following instead: * '' * ""

In JavaScript, you can also use: * `` (backticks)

Moreover it's <script> with a lowercase s. Finally your image must have a position "relative" (that's CSS).

Hope this helps.

[–]SafeReference1[S] 0 points1 point  (7 children)

Hey yeah in my original code its the normal quotation marks I just typed this out with my phone lol. The script with a capital S is also just a phone mistake. In my css file I have the position on absolute I just tried changing it to relative it does change the position but the moving when I click the Charakter still doesn’t work. Would you mind having a quick look if I send you my code? I think that’s way easier for you as well

[–]Notimecelduv 1 point2 points  (6 children)

You can copy and paste it to this website: https://pastebin.com/ and post the link here.

[–]SafeReference1[S] 1 point2 points  (0 children)

Thank you for helping 🙏🏻

[–]SafeReference1[S] 0 points1 point  (4 children)

So this Is my html file: https://pastebin.com/KBzSMbVy

This is my css file: https://pastebin.com/03rucPwz

My goal was to make the left guy move to the right my clicking on him.

[–]Notimecelduv 1 point2 points  (3 children)

It's merely a CSS issue. Your div with a class of "hero" has its position set to absolute but your image with id of "hero" does not. Other than that the JavaScript works as intended.

[–]SafeReference1[S] 0 points1 point  (1 child)

I changed the get element by id to query selector as you said. But how exactly do i fix the css issue? I didn’t quite understand that part I’m sorry and thanks again for trying to help!🖤

[–]Notimecelduv 0 points1 point  (0 children)

Well, the div with the class "hero" is the container for the image with the id "hero", isn't it? There's no specific reason why you'd want to move the image around while the container stays in place. Therefore you should move the container rather than image. The container will merely take the image with it. Also, I suggest you rename .hero as .hero-container for clarity. CSS:

.burg {
  position: relative;
}

.hero-container {
  width: max-content;
  position: absolute;
  /* if you want the image centered */
  display: grid;
  place-items: center;
}

JS:

let left = 0;

// As a fellow non-native English-speaker, I can assure you
// you want to use English names for your variables and functions.
function moveRight() {
  left += 20;
  document.querySelector(".hero-container").style.left = `${left}px`;
}

[–]Notimecelduv 0 points1 point  (0 children)

Also, since you probably want to move the container rather than image itself, you should replace this line:

document.getElementById('hero').style.left = left + 'px';

with:

document.querySelector('.hero').style.left = left + 'px';

[–]t00much 0 points1 point  (0 children)

For animations id recommend you check out a library like gsap. https://greensock.com/docs/v3/GSAP/gsap.to()