AARRGGHHH Posted March 3, 2018 Share Posted March 3, 2018 I need to create variable names in a loop (part of this seems to be working) and then get 26 of the 39 variables to perform simple math (for example: variable -= 10). Getting the variables recognized as variables, and not text, seems to be the issue. This works properly, it accesses 13 canvases named canvas1 through canvas13: for (i = 1; i < 14; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); ... } However, when I try to dynamically create canvas names, and dynamically create 2 variables in the same line, the variables are created as text. for (i = 1; i < 14; i++) { document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; } Probably a dozen variations on this theme have failed. In a nutshell, the variables bright1 and cont1 through bright13 and cont13 are not recognized as variables that can be manipulated with math, they're recognized as text. Right now I'm typing out 13 lines of code: document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)"; ... document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)"; which is inefficient, to say the least. So, what is the proper syntax to use so that bright1 through bright13 and cont1 through cont13 are variables instead of text? Thank you! Link to comment Share on other sites More sharing options...
Ingolme Posted March 3, 2018 Share Posted March 3, 2018 This is what arrays were made for. Instead of naming variables bright1 or bright13, use an array bright[1] and bright[13]. I don't know where the variables are being set, but you'll have to change that block of code as well. Arrays start at index zero, so take that into account. Using arrays, the result would be like this: var canvas; for (i = 0; i < 14; i++) { canvas = document.getElementById('canvas' + (i+1)); canvas.style.filter = "brightness(" + (bright[i] -= 10) + "%) contrast(" + (cont[i] -= 10) + "%)"; } What is the "-=" for? You're modifying the variable itself, which means after you;ve used it it will be 10 less than before. You can use just a "-" to subtract 10 without changing the value of the variable. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted March 3, 2018 Author Share Posted March 3, 2018 Hi Ingolme Thank you for the rapid reply. Arrays would necessitate adding a total of 26 arrays to this code, which would over-complicate the code and could waste memory as well. I would really prefer to do this with variables. Do you have any suggestions? Yes, "-=" is used to modify the variable itself. Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted March 3, 2018 Share Posted March 3, 2018 If you're saying you have 26 sets of numbered variables, there is no way that using arrays would be more complicated or take up more memory. Arrays are structures specifically designed to simplify tasks of this nature. If you don't fix your data structures now, you're going to run into plenty more barriers of this kind where you're forced to write the same line of code over and over with a different number in each line. Yes, it's going to take some more work to replace your current code with arrays, but if you don't do it now, you'll inevitably have to do it later. The longer you wait the more difficult it will be to change your whole program. You're better off fixing it now before your program gets too much more complicated. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted March 3, 2018 Author Share Posted March 3, 2018 (edited) Ingolme, I will not turn this into a programming philosophy debate. I will either do it the way I'm doing it now, or I will use loops. If you know how to assist me in using loops, that would be deeply appreciated. If you do not know how to assist me in using loops, I understand. Edited March 3, 2018 by AARRGGHHH Link to comment Share on other sites More sharing options...
dsonesuk Posted March 3, 2018 Share Posted March 3, 2018 You can manipulate a string of a variable using window["stringofvariablename"] example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style type="text/css"> </style> </head> <body> <canvas id="canvas1" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="canvas2" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="canvas3" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="canvas4" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="canvas5" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="canvas6" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var bright1 = 25; var bright2 = 50; var bright3 = 75; var bright4 = 110; var bright5 = 50; var bright6 = 25; var cont1 = 20; var cont2 = 40; var cont3 = 50; var cont4 = 110; var cont5 = 80; var cont6 = 60; for (i = 1; i <= 6; i++) { var x = window[("bright" + i)] -= 10; var y = window[("cont" + i)] -= 10; var k = document.getElementById('canvas' + i); var ctx = k.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); alert("brigt: " + x + "%; con: " + y + "%"); k.style.filter = "brightness(" + (x + '%') + ") contrast(" + (y + '%') + ")"; } </script> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 3, 2018 Share Posted March 3, 2018 I think arrays would be the better option though, or apply the value to the element itself using custom data attribute and give it a unique classname to loop through reading the data attribute value/s and apply brightness and contrast values as required. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted March 5, 2018 Author Share Posted March 5, 2018 Thank you very much for posting. I got moved to something else so I haven't been able to try it out yet, I'll let you know how it goes. Thanks again Link to comment Share on other sites More sharing options...
AARRGGHHH Posted April 11, 2018 Author Share Posted April 11, 2018 dsonesuk, this worked perfectly, thank you very much for your time. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now