无法将函数参数作为字符串在函数本身中使用

时间:2015-12-29 22:32:02

标签: javascript html function

标题可能非常令人困惑,但让我解释一下。我在左边有一个图片列表,我在所有图片上添加了onclick功能,以显示图片和右侧的一些信息。我想这是左侧的某种缩略图,右侧是较大的版本,但一次只有一个。所以我使用所有文件名和循环的数组将左图放在容器中:

var ancients = [
    "hunter",
    "strangling-vines",
    "quicksand",
    "earthquake",
    "eruption"
]
var ancients_list = "";
for (i = 0; i < ancients.length; i++) { 
    ancients_list += '<a id="' + ancients[i] + '"><img src="img/the-ancients/' + ancients[i] + '.png" height="120px" onclick="ancients(' + ancients[i] + ')" /></a>';
}
document.getElementById("ancients").innerHTML = ancients_list;

ancients函数如下所示:

function ancients(name) {
    var name2 = String(name);
    document.getElementById("image").innerHTML = '<img src="img/the-ancients/' + name2 + '.png" />';
    document.getElementById("info").innerHTML = 'the name of this piece is ' + name2;
}

这根本不起作用。我可以使用一个按钮调用HTML文件中的函数,并将name参数设为数字,然后它会显示在右侧;它就像我试图在循环中定义的名称参数不希望插入右侧的图像/文本中。在最终的HTML页面中,图像线工作正常;我明白了:

<img src="img/the-ancients/hunter.png" height="120px" onclick="ancients(hunter)">

我尝试了很多东西,但我只是不知道,也找不到我做错了什么,我正在考虑ancients函数的参数和参数,但我真的不是肯定的。

此外,当我将typeof name2放入信息部分时,它会返回String

1 个答案:

答案 0 :(得分:2)

因为

onclick="ancients(' + ancients[i] + ')"

呈现为

onclick="ancients(hunter)"

所以你的代码正在寻找变量猎人,而不是字符串。您需要在字符串周围添加引号。

onclick="ancients(\'' + ancients[i] + '\')"

现在它将呈现为

onclick="ancients('hunter')"

现在,如果字符串包含',则会失败。

理想情况下,您只需使用数据属性并添加不显眼的事件处理程序。

function ancientsFnc(name) {
  var name2 = String(name);
  document.getElementById("info").innerHTML = 'the name of this piece is ' + name2;
}

var ancients = [
  "hunter",
  "strangling-vines",
  "quicksand",
  "earthquake",
  "eruption"
]
var ancients_list = "";
for (i = 0; i < ancients.length; i++) {
  ancients_list += '<a href="#" id="' + ancients[i] + '">' + ancients[i] + '</a>';
}

var ancientElem = document.getElementById("ancients");
ancientElem.innerHTML = ancients_list;
ancientElem.addEventListener("click", function(evt) {
  var elem = evt.srcElement;
  ancientsFnc(elem.id);
  return false;
});
a {
  display: block;
}
<div id="info"></div>
<div id="ancients"></div>