Using Function Argument within a Variable Reference

Question

I know this is very naive, but I'm trying to do something like this:

var add01in = "#fff";
var add01out = #000";

function over(id) {
  var dupe = id.attr('id')
  id.style.backgroundColor = (dupe + 'in');
}

function out(id) {
  var dupe = id.att('id');
  id.style.backgroundColor = (dupe + 'out');
}

<div id="add01" onmouseover="over(this)" onmouseout="out(this)">Hello World!</div>

So I want it, when the user mouseovers the div with ID = "add01", for the color to change to whatever the value of the variable "add01in" is. And when they mouseout it changes to the value of "add01out".

The only thing is I cannot for the life of me figure out how to get the words 'in' and 'out' to add on to the end of the argument's ID.

So for instance, onmouseover should make id.style.backgroundColor = add01in (as in the var) and then equal to the var's value, so #fff

sorry for making this so cryptic. any help is welcome... or alternatives, but at this time I can't find any way around this since I need to use the function a LOT of time, and with changing colours, etc.

@MikeC Yes but they all share the same class stye, and therefore every div with the class name would change after hovering over just one of the vars. I really didnt make that clear in the post though, sorry. — Lewis H, Mar 02 '16 at 20:38
@u_mulder Sorry, its supposed to be attr('id') to get the id attribute of the "this" argument — Lewis H, Mar 02 '16 at 20:39
What about doing the css using the id: `#add01 {background-color: #000;} #add01:hover {background-color: #FFF;}` — fqhv, Mar 02 '16 at 20:40
You can apply styles to IDs as well, you know. `#add01:hover { background-color: #FFF; }` — Mike Cluck, Mar 02 '16 at 20:40
Use += and -= operators, but quantites on both sides must be integers, best written as hexadecimal: **color+= #fff ; color-= #fff** — Arif Burhan, Mar 02 '16 at 20:43
@MikeC really defeats the purpose of it. I'm trying to give it a changing color, obviously I could use css but it would limit me from what I am trying to accomplish in the grand scheme of things. thanks for your help though. — Lewis H, Mar 02 '16 at 20:44
Possible duplicate of http://stackoverflow.com/questions/33554642/animate-background-color-on-mouseenter-event — guest271314, Mar 02 '16 at 20:45
@guest271314 Did you even read my question? It had nothing to do with CSS animations or mouseover events, merely including them in my code does not make that relevant. — Lewis H, Mar 02 '16 at 20:47
@LewisHarris _"It had nothing to do with CSS animations or mouseover events, merely including them in my code does not make that relevant."_ ? See OP at _"So for instance, onmouseover should make id.style.backgroundColor = add01in (as in the var) and then equal to the var's value, so #fff"_ What is requirement ? http://stackoverflow.com/a/34983635/2801559 ? — guest271314, Mar 02 '16 at 20:50
@guest271314 _"merely including them in my code does not make that relevant."_ As I said, I included them in my code, the fact that they are in there does not mean that I asked a question about either of those subjects, nor does it mean that it is a duplicate of that other question. Are you a bot? — Lewis H, Mar 02 '16 at 20:55

score 0 · Answer 1 · answered Mar 02 '16 at 20:40

0

First, att is not valid. Maybe .getAttribute? Second, you are trying to reference a variable with a variable name, which is not something you can do with JS. Use an object instead:

var colors = {
    add01in: '#fff',
    add01out: '#000'
}

This way you can reference them with

id.style.background = colors[dupe + 'in'];

HOWEVER you should really, really use CSS for this kind of thing.

answered Mar 02 '16 at 20:40

Gian Marco Toso

11,676
5
29
38

this seems to be the closest solution, although I will need to heavily alter the majority of my code. Thanks for the submission. :) – Lewis H Mar 02 '16 at 20:46

score 0 · Answer 2 · answered Mar 02 '16 at 20:41

If you want to change the text color:

var t = document.getElementById('add01');
var overColor = '#585858';
var outColor = '#000';

t.addEventListener('mouseover', function (event) {
    t.style.color = overColor;
});

t.addEventListener('mouseout', function (event) {
    t.style.color = outColor;
});

if you want to change the bg color

var t = document.getElementById('add01');
var overColor = '#585858';
var outColor = '#000';

t.addEventListener('mouseover', function (event) {
    t.style.background = overColor;
});

t.addEventListener('mouseout', function (event) {
    t.style.background = outColor;
});

Don't think you need to interpolate using the ID yeah? I think your hangup here is not realizing you can save a reference (in my example it's variable t) to the element you want to manipulate. I think that's why you were essentially trying to simulate some kind of introspection using the ID to lookup the var name.

Regarding CSS-- you could use it, but then you would have to make sure all the colors you want have classes in the stylesheet. If you're looking for more dynamic control than I can see why you'd want to do it this way. If the colors never change, then make a CSS class:

.mouse-over { color: #fff; }

and just add/remove it in the event handlers with the classList API which you can read about on MDN.

Interesting points, at least noteworthy. Thanks for your input :) — Lewis H, Mar 02 '16 at 20:50

score 0 · Accepted Answer · answered Mar 02 '16 at 21:00

You may use an object for the colors of the ids and their state. And use the parameter of over/out for the id.

var color = {
    add01in: "#fff",
    add01out: '#000'
};

function over(id) {
    document.getElementById(id).style.backgroundColor = color[id + 'in'];
}

function out(id) {
    document.getElementById(id).style.backgroundColor = color[id + 'out'];
}

<div id="add01" onmouseover="over('add01')" onmouseout="out('add01')">Hello World!</div>

Using Function Argument within a Variable Reference

3 Answers3