This is the most ridiculous problem. I have been moving parenthesis and quotes and plus signs for HOURS and I still can’t get it right. Either I get an error like “invalid left-hand argument” or “unexpected character” or I get no errors (Chrome Debugger) and the loop doesn’t do anything.
I’m building a Web based image editor. On the Hue page, I need to create 13 canvases and load them with images. This loop works fine:
for (i = 1; i <= 13; i++)
{
c = document.getElementById(“canvas” + i.toString());
context = c.getContext(“2d”);
context.drawImage(image,0,0,c.width,c.height);
}
Later I need to make hue changes to all 13 images. The code I’m using is bulky and unprofessional (but it works):
You’re not using var (or let or const) meaning all your variables are global. That’d be the first thing I’d fix.
Other than that if you could post a minimal amount of code (including HTML) so that we can recreate the problem, I’m sure it shouldn’t be too hard to figure out.
Thank you so much Paul, that pointed me in the right direction. The code needed some minor changes (loading the variables into the array), since all zeros was creating greyscale images.
var hue = [90, 45, 20, 5, 135, 0, -180, 180, -135, -5, -20, -45, -90];
var sat = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
for (var i = 0; i < 13; i += 1)
{
if (i == 6) continue;
document.getElementById('canvas' + (i + 1)).style.filter =
"hue-rotate(" + (hue[i] -= 90) + "deg) saturate(" + (sat[i] -= 0) + "%)";
}
Since canvas6 will be updated with the clicked thumbnails’ hue and sat settings, it cannot be included in the loop, thus the continue statement.
Only problem is, the above code will only work once. If I click the thumbnail again, nothing happens, In the debugger, the code fires with no errors. Why is it that I can only use this code once?
I know this is politically incorrect programming, but I come from a background in BASIC languages, where global variables are common, so I really don’t have a problem with them.
I am curious, how would I write this critical sentence in a loop using variables, as I was trying to do in my original code? I very much want to know the way to do what I could not do.
The proper way is to place the code in an IIFE (immediately invokes function expression).
I won’t be able to help with this until tomorrow, but I see that your code is subtracting 90 from the hue each time, when from the interface I presume that you want to subtract a different amount each time?
Okay, thank you. After struggling with this for hours and not getting to bed until 7 am (I get a bit obsessive, I can’t sleep well with an unresolved programing issue) I very much look forward to seeing your solution.
In regard to the variables, the values would never change. The thumbnail click that invokes the function will add or subtract the same amount every time it is fired. This allows the user complete control over subtle to drastic hue changes with a simple click or clicks. The center image in the table shows the changes, and then passes the values to the original image when the user accepts the changes.
I want to take this mass repetition of code (which appears with minor variations (the hue rotation values - +5deg + 20deg etc…) in 13 functions and turn it into a loop.
We’ve already gone over how to fix it. I want to make sure that any improvement that I make actually works with your current system.
That’s why I’m asking you for a link (possibly as jsfiddle code) to currently working code, even if it’s with loads of repetition. From that working by repetitive code, I can remove the repetition and more importantly, make sure that the improvements still continue to work with your code too.
The work I’m doing is covered by an NDA so I cannot publish my code. However, we have not already gone over how to fix it. You replied with an example using an array, but we never discussed the solution using a loop and variables. If you could just assist with that, it would be extremely helpful.
You don’t have to supply the full version, a simplified version will do perfectly well.
I could put together a simplified version, but then I risk making assumptions that result in it failing to work in your own code, and I do not want such assumptions to occur.
