0

I'm currently working on creating a simple interactive CV, with mainly javascript. The idea is that the user steers a character to the right and then a few "about me"-divs will show up. These "about-me"-divs are supposed to move when the character moves, so it looks like they're getting closer to/further away from them. If unclear, check the demo.

I've fixed this by setting style.left to 100, and then subtracting from it each time the character moves to the right. In the example I've used minions, instead of "about-me"-divs, just to get the function to work.

let moveMinion = 100; // This is the same as their 'left' in CSS.
let moveMinionTwo = 150;

if (keyPresses.ArrowRight) {
        moveMinion -= 0.3;
        moveMinionTwo -= 0.3;
        
        minionOne.style.left = moveMinion + '%'; // I Used % because I want it to work on different screen widths.
        minioneTwo.style.left = moveMinionTwo + '%'; }

However I want the "about me"-divs to "repeat" and come back again, after the character have walked for a bit. Like this example.

I tried using this code underneath, in the same function ofc, but nothing happens, except it seems like the minion blinks quickly when style.left is -10%.

if (minionOne.style.left <= -10 + '%') minionOne.style.left = moveMinion + '%';

TLDR: I want style.left to change to something else when style.left hits a specific number.

Bear in mind, this is not finished yet, so you don't have to judge the code and the project outside of the one I need help with, unless you want to give any tips.

Repo on github

My demo

William S
  • 39
  • 6
  • You can not do less than with a string and expect it to work how you expect it. You need to get the numbers and compare that. Why are you not using the moveMinion value? – epascarello Nov 26 '21 at 14:01
  • Oh alright, that makes sense actually. Thanks! I guess you're asking why I'm not using it inside the paranthesis? If I do that I will have to make a new variable and use in the end? Like this? ' const minionStartValue = 100; if (moveMinion <= parseInt(-10) '%') minioneOne.style.left = minionStartValue; – William S Nov 26 '21 at 14:21

1 Answers1

0

You can't <= strings. You gotta convert one to a number and compare to a number.

const threshold = -10;
const asNum = Number(minionOne.style.left.split('%')[0]);
if (asNum <= threshold ) {
  minionOne.style.left = `${100 + asNum - threshold}%`;
}
Ivan Rubinson
  • 3,001
  • 4
  • 19
  • 48
  • Okay, makes sense, thanks! How do I combine this with moveMinion++; in the first codeblock in my post? I'm not really familiar with the Number, split and `$ syntax. – William S Nov 26 '21 at 17:00
  • I don't see `moveMinion++` anywhere. About my answer, the docs are here: [Number function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#function_syntax), [String split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split), [Template literals ($ syntax)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) – Ivan Rubinson Nov 27 '21 at 15:37