如何通过函数参数调用全局变量并在指定div中显示其值？

定义了全局变量desc1、desc2、desc3，编写showDesc函数后，点击对应div时传入变量名字符串作为参数，但当前仅显示变量名而非变量值，需要实现点击div时显示对应全局变量的实际值。

原代码如下：

原JavaScript代码 #

var desc1 = "apple description";
var desc2 = "bananna description";
var desc3 = "orange description";

function showDesc(arg) {
  var myDesc = arg;
  document.getElementById('description').innerHTML = myDesc; 
}

原HTML代码 #

<div onclick="showDesc('desc1')">Apples</div>
<div onclick="showDesc('desc2')">Bannans</div>
<div onclick="showDesc('desc3')">Oranges</div>

<div id="description"></div>

方法1：通过window对象访问全局变量 #

全局变量会自动挂载到window对象上，因此可以通过window[arg]获取对应变量的实际值：

function showDesc(arg) {
  var myDesc = window[arg]; // 从window对象中取出对应变量的值
  document.getElementById('description').innerHTML = myDesc; 
}

方法2：用对象统一存储描述信息（更推荐） #

将所有描述信息封装到一个对象中，既避免污染全局作用域，也更便于后续维护：

修改后的JavaScript代码 #

var descriptions = {
  desc1: "apple description",
  desc2: "bananna description",
  desc3: "orange description"
};

function showDesc(arg) {
  var myDesc = descriptions[arg];
  document.getElementById('description').innerHTML = myDesc; 
}

HTML代码无需修改，保持原样即可。

方法3：直接传递变量值（简化写法） #

如果不需要通过变量名字符串传递参数，也可以直接将变量值作为参数传入：

修改后的HTML代码 #

<div onclick="showDesc(desc1)">Apples</div>
<div onclick="showDesc(desc2)">Bannans</div>
<div onclick="showDesc(desc3)">Oranges</div>

<div id="description"></div>

对应的JavaScript代码 #

var desc1 = "apple description";
var desc2 = "bananna description";
var desc3 = "orange description";

function showDesc(arg) {
  document.getElementById('description').innerHTML = arg; 
}

内容的提问来源于stack exchange，提问作者Levi