Forcing If Condition Within Function to Run Every Time-CodePudding

So, I've built a quick function to change hue values of a target element in JavaScript, and it works mostly fine now, but I do have some more questions that go beyond the initial post's scope. So I'll open a new question and post them here.

Here's the code:

document.getElementById('left').style.filter = "hue-rotate("   20   "deg)";
document.getElementById('right').style.filter = "hue-rotate("   20   "deg)";

document.querySelectorAll('div').forEach(occurence => {
  occurence.addEventListener('click', (e) => {
    const filter = e.target.style.filter;
    var deg = parseInt(filter.replace(/[^0-9.]/g, ""));
    deg  = 40;
    e.target.style.filter = "hue-rotate("   deg   "deg)";
    if (deg >= 360) {deg -= 360}
    console.log(e.target.id   " is "   deg   "deg");
 });
});

My main question (1) is that I've coded an if statement to log the current hue value within 360º (the hue-rotate works anyway with values over 360º, but I find it to be clearer this way). However, while the check works perfectly the first time around, it stops working after the function loops once through the 360º (on subsequent loops, it goes beyond 360º).

For clarification, the statement has been positioned after the degree value is already set (and animated) so as to sidestep the quick loop animation that happens when it goes from, say, 340 to 20º (instead of going there directly, it seems to loop back through the whole hue wheel).

Also, (2) the initial hue-rotate states are defined (at the top) within the script because the function does not work otherwise, although both DIVs do have defined CSS values.

That's it! Thanks in advance!

CodePudding user response：

Since the degree value on the element is always set before limiting the degrees to 360, the 2nd time it loops subtracting 360 wont be enough.

style      logged value
0          0
360 (-360) 0
720 (-360) 360
etc

To limit the logged value between [0, 360], use the % operator instead

document.querySelectorAll('div').forEach(occurence => {
  occurence.addEventListener('click', (e) => {
    const filter = e.target.style.filter;
    var deg = parseInt(filter.replace(/[^0-9.]/g, ""));
    deg  = 40;
    e.target.style.filter = "hue-rotate("   deg   "deg)";
    deg %= 360; // deg = deg % 360
    console.log(e.target.id   " is "   deg   "deg");
 });
});

For (2): To get the style of the element from css, use getComputedStyle

occurence.addEventListener('click', (e) => {
  const filter = getComputedStyle(e.target).filter;
  ...
});

CodePudding user response：

   e.target.style.filter = "hue-rotate("   deg   "deg)";

above line should be below if condition if (deg >= 360) {deg -= 360}

document.getElementById('left').style.filter = "hue-rotate("   20   "deg)";
document.getElementById('right').style.filter = "hue-rotate("   20   "deg)";

document.querySelectorAll('div').forEach(occurence => {
  occurence.addEventListener('click', (e) => {
    const filter = e.target.style.filter;
    console.log(filter);
    let deg = parseInt(filter.replace(/[^0-9.]/g, ""));
    deg  = 40;
    if (deg >= 360) {
      deg -= 360
    }
    e.target.style.filter = "hue-rotate("   deg   "deg)";

    console.log(e.target.id   " is "   deg   "deg");
  });
});

<div id="left">left</div>
<div id="right">right</div>