Использовать var как имя var в javascript

Question

У меня есть небольшой вопрос. Что я хочу сделать, это сделать переменную InnerHTML.

Может быть код объясняет это лучше, чем я есть сейчас:

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

---

Вместо поиска var это дает результат VarOne, VarTwo или VarThree, очень логично, но как я могу это сделать, поэтому он использует var?

Answer 1

Вместо использования строки в качестве имени переменной напрямую, положить значения в хэш:

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


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

Answer 2

Переменные в области по умолчанию находятся в объекте window. Вы должны быть в состоянии сделать:

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

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

Таким образом, вы просто должны быть в состоянии изменить содержимое вашей MyFunction функции, чтобы быть:

document.getElementById("MyDiv").innerHTML = window['Var' + event.target.id]; 

Answer 3

Теперь, я не эксперт JavaScript, но, возможно, eval() будет делать что ты хочешь?

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

В качестве альтернативы вы могли бы создать массив и получить доступ к своим данным таким образом.

Answer 4

Более безопасная версия и более структурированная версия может включать в себя что-то вроде:

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


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

Answer 5

While Ответ Джонатана правильный, вы должны избегать загрязнения объекта окна переменными.

Рассмотрим рефакторинг использовать объект для хранения этих значений:

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

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

Это оставляет только одну переменную в окне объема (который также можно избежать с помощью замыкания).