What do these values mean and how are they calculated?

document.getElementById("car").addEventListener("mousemove", opa);
let d = 0;
let i = 0;
function opa() {
  let h = event.pageX;
  if (h - d > 3) {
    if (i <= 1) {
      i += 0.01;
      document.getElementById("car").style.opacity = i;
      d = h;
    }
    else{
      i=1
    }
  }
    if (d - h > 3) {
      if (i >= 0) {
        i -= 0.01;
        document.getElementById("car").style.opacity = i;
        d = h;
      }
       else {
        i = 0;
        d = 0;
      }
    }
  }

This is working code, but a lot of things are not clear, what does this mean? if (h - d > 3), why is this and what does it mean? d = hour;

annoyingly for other people to read, variable names dont have to ‘mean’ anything.

If the value of h, minus the value of d, is greater than 3, then we’re doing to do something.
It’s a bit annoying to read, but it relies on operator precedence (which you’ve learned in the past as part of maths; multiplication before addition; same thing here, but with more symbols on the table)

All of the mathematical expressions come higher in the order of precedence than comparitor expressions; so it will do the - first, then test the >.

I dont see the word ‘hour’ in here. Are you shortening the variable names to try and make it less readable when you post it?

d = h means set the value currently in h to d.

The code you have posted appears to be trying to make the element identified by “car” fade in and out depending on which way (horizontally) you swipe your mouse over it.

You already posted this code, and already received explanations of what it does. Why are you posting it again? What about the previous explanation did you not understand?

1 Like

I know the priorities, but I’m talking about something else; for me, codes like this are very confusing, what does this affect?/2+270

This sentence is nonsensical.

(h - d > 3) is a conditional test. It evaluates an expression into a boolean (true or false). The if then takes the appropriate action depending on what value it gets from the test.

I don’t understand the writing of the code, what is this (h-d>3), why subtract from the zero variable? if you can immediately write like this, for example (h>3), what does this do (i <= 1) is generally not clear

From the previous thread:

If you look at the re-written code that uses more verbose variable names, it becomes pretty clear what is going on.

if (currentHorizontalPosition - lastHorizontalPosition > 3)

It calculates the difference between the new position and last position, and sees if it has changed by more than 3 pixels. If you need even more clarity, separate out the calculation:

let distanceMoved = currentHorizontalPosition - lastHorizontalPosition;
if (distanceMoved > 3)

Because that variable won’t always be zero. That’s why it’s a variable.
d starts as 0:

but every time the function opa executes, the value of d is changed:

So the second time it executes, d is not zero (unless h was also zero this time).

WHAT influences this variable? d, where will the readings in this variable come from?

I literally just told you, and showed you the line that changes the value of d.

Therefore, it is almost impossible for me to explain this so that I understand, so I also look at this code and nothing is clear, is there a program where you can insert code that would show how it works step by step?

Take a piece of paper.
Write “h” at the top on the left side.
Write “d” at the top in the middle.
Write “i” at the top on the right side.

Start at the beginning of your code.
Any time the value of either h,d, or i is set, write the actual number value it gets assigned on the piece of paper in the correct column. If there is already a value there, cross it out and write the new value beneath.
The current value of that variable, whenever you need to use it, is whatever is written on your paper in that column that is not crossed out.

execute the base level (everything outside the function) of the code line by line.
execute opa(), with the value for event.pageX being 5.
execute opa() again, with the value for event.pageX being 10.
execute opa() again, with the value for event.pageX being 3.

Observe how the values of the variables change.

(And yes, this is how I was taught variables in school. On paper.)

3 Likes

(And for those that are going to yell at me about variable scoping; for the purposes of this lesson and this specific block of code, it doesnt matter, because the first line of the function is to assign h. Let it play out.)

1 Like

It would be nice to know these indicators in numbers so that you can calculate it yourself, but why write here that it checks if (i <= 1)? In general, if you look at such codes associated with movements, it is impossible to understand anything.

d, h, and i will always have a numerical value you can calculate. If you do what I suggested, you should see that.

If the opacity is less than or equal to 100% (1), increment it and set the element’s property. Otherwise, do nothing and retain its value at 1.
There are better ways to execute this idea, but this is how your code is doing it.

Yes, I tried to draw, but without success, it’s unclear, I don’t understand exactly what numbers should appear there

Okay… so… when you got to this line:

what did you write down?

It says 0

so “d” says 0 under it.
let i = 0;
I hope i dont have to ask what this line does…

So now we get to

The first line of opa() is
let h = event.pageX;

so at this point you should have a numerical value under each of your variables…

Why are the values of let h = event.pageX different from d? if we subtract from 0?