Javascript variable name containing function parameter

Question

I've been searching a bit for this problem, found some track about ways to solve it, using eval() and window[] but couldn't figure the good syntax out.

Here is my code :

<script>

var colored = false;

function color(object) {

    if(colored) {
        document.getElementById(object).style = "fill:#0000ff";
        colored = false;

    } else {
        document.getElementById(object).style = "fill:#000000";
        colored = true;
    }

}

</script>

This code is about coloring a svg path (representing an eye) by clicking on a link and then coming back to the original color by clicking again on the same link.

<a id="o1-right" onclick="color('right-orbit')" href="#">

This code works fine for coloring a single element at a time.

But if I want to use it for a second link, for example :

<a id="o1-left" onclick="color('left-orbit')" href="#">

Then the variable named colored will mess up cause used two times.

I click on the right eye : Colored is assigned to false. The right eye is colored in black. Colored will get true. I click on the left eye : Colored is currently assigned to true. The left eye will get blue. Colored will get false.

I would like the left eye to turn black instead.

The problem is coming from the variable which is used by the left eye link and the right eye link.

I'm looking for a solution to dynamically name the variable depending of the object. In my head this would look like something like this :

<script>

function color(object) {

var colored + object;

    if(colored + object) {
        document.getElementById(object).style = "fill:#0000ff";
        colored + object = false;

    } else {
        document.getElementById(object).style = "fill:#000000";
        colored + object = true;
    }

}

</script>

But I know this is completely wrong cause the syntax seems to be horrible and in each case the declaration var colored + object; will mess up with the actual value of the variable :(

I don't even know if I'm not considering something really easy and obvious or if there is a real trick behind it.

Thank you for you help !

Answer 1

Instead of having that global variable holding the colored state, consider toggling a class 'colored'.

You can do everything with css.

If you really have to do it in JavaScript, then you can check if your current object has the class 'colored' and then proceed according to that.

You can also consider adding a custom class to your < a > :

a.color-changeable.colored{fill:#000} a.color-changeable {fill:#0000ff}

Then to handle the click:

$('.color-changeable').click(function(){ $(this).toggleClass('colored'); });

Answer 2

The way I would solve this issue is by not using a global boolean to store whether or not the color has been adjusted (as this will only allow you to use the function for one element at a time).

I would store the state of colored (true/false) on the element itself.

Something like:

function color(id) {
    var element = document.querySelector(id);
    if(element.colored) {
        document.getElementById(id).style = "fill:#0000ff";
        document.getElementById(id).dataset.colored = false;

    } else {
        document.getElementById(id).style = "fill:#000000";
        document.getElementById(id).dataset.colored = true;
    }

}

The above code is untested but should help you in the right direction.

More information on HTMLElement.dataset

Answer 3

In your case, I would make colored an object so that you can store multiple values in it and look them up by name:

<script>

var colored = {}; // new object

function color(object) {

    if(colored[object]) {
        document.getElementById(object).style = "fill:#0000ff";
        colored[object] = false;

    } else {
        document.getElementById(object).style = "fill:#000000";
        colored[object] = true;
    }

}

</script>

You mention in your post that you had looked at a way to do make variables using window . The syntax for that would be like

window["colored"+object] = false;

which you will notice is very similar to the syntax I used when I made colored an object. This is because global variables in JavaScript are also properties on the window object .