0

I've a small question. What I want to do is make a InnerHTML variable.

Maybe code explains it better, what I have now:

-----Javascript-----

var VarOne = 'Four';        
var VarTwo = 'Five';
var VarThree = 'Six';


function MyFunction(){
document.getElementById("MyDiv").innerHTML = ['Var' + event.target.id];
     }

-----Html----- 

<div id="MyDiv"></div>

Instead of looking for a var, it gives as outcome 'VarOne, VarTwo, or VarThree, very logically, but how can I make it so he uses the var?

5 Answers5

4

While Jonathan's answer is correct, you should avoid polluting the window object with variables.

Consider refactoring to use an object to store these values:

var values = {one:'four', two:'five', three:'six'};

function MyFunction(){
    document.getElementById("MyDiv").innerHTML = values[event.target.id];
}

This leaves only one variable in the window scope (which can also be avoided by using closures).

ifunk
  • 627
  • 4
  • 10
2

Variables in the default scope are in the window object. You should be able to do:

var id = 'One'
var VarOne = 'Four';
var VarTwo = 'Five';
var VarThree = 'Six';

alert(window["Var" + id]); // => Four

So you should just be able to change your MyFunction function's contents to be:

document.getElementById("MyDiv").innerHTML = window['Var' + event.target.id];
Jon Newmuis
  • 25,722
  • 2
  • 45
  • 57
2

Instead of using a string as a variable name directly, put your values into a hash:

var Vars = { 'One': 'Four', 'Two': 'Five', 'Three': 'Six' };        


function MyFunction(){
  document.getElementById("MyDiv").innerHTML = Vars[event.target.id];
}
Iain
  • 4,203
  • 23
  • 21
  • +1 for using an object, as I completely forgot that `event.target` is a HTML element and its `id` usually isn't an integer. – Blender Jul 23 '12 at 04:26
1

A safer version and better-structured version might involve something like:

var DivContents = {
    VarOne : "Four",
    VarTwo : "Five",
    VarThree : "Six"
};


function MyFunction(){
    document.getElementById("MyDiv").innerHTML = DivContents['Var' + event.target.id];
}
Norguard
  • 26,167
  • 5
  • 41
  • 49
0

Now, I'm no JavaScript expert, but maybe eval() will do what you want?

 var results = eval('Var' + number);

Alternatively, you could probably create an array and access your data that way.

Richard J. Ross III
  • 55,009
  • 24
  • 135
  • 201
  • 1
    +1, primarily because just because he suggested eval doesn't mean he should be downvoted by default. It's a very reasonable solution, especially if the variable isn't in the global scope. – Lusitanian Jul 23 '12 at 04:21
  • Doesn't it kind of depend on where `number` is coming from? If it's defined by the user, that seems like a flaw. – Jon Newmuis Jul 23 '12 at 04:24
  • 1
    @Lusitanian: I don't know about this being a reasonable solution. Arranging the data so that it can be accessed without eval should be possible and not too much work in almost all cases. Unless you have something like a REPL, there should not be a need for eval. – Thilo Jul 23 '12 at 04:30
  • There is actually a question here: "When is eval not evil": http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil – Thilo Jul 23 '12 at 04:33
  • @Thilo I do agree that it's not optimal, but it's possible that the questioner oversimplified the problem and he is, for some reason; forced to access the data this way. Regardless, I'd let him decide. – Lusitanian Jul 23 '12 at 04:35