Jump to content

For Loop with Dynamically Created Variables

AARRGGHHH

By AARRGGHHH
in JavaScript

 Share

Recommended Posts

AARRGGHHH Newbie

AARRGGHHH

Posted
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
AARRGGHHH Newbie

AARRGGHHH

Posted
  • Author
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
AARRGGHHH Newbie

AARRGGHHH

Posted
  • Author
Posted (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 by AARRGGHHH
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
  • 1 month later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...