Javascript无法从函数参数中找到数组答案

【问题标题】：Javascript can't find array from function argumentJavascript无法从函数参数中找到数组
【发布时间】：2015-11-25 11:15:00
【问题描述】：

我希望 JavaScript 根据您单击的项目来查找项目信息，而不是为每个项目创建一个新函数。

我试图通过将 id 作为参数传递给 JavaScript 函数来做到这一点，但是找不到变量/数组。

当您运行代码时，它会在控制台中输出尖峰信号，但在尝试查找 array.z 时它不起作用

我也尝试过使用 value 代替 id，但效果相同。

JSFiddle：http://jsfiddle.net/b2h0bo29/

var withspike = document.getElementById('withspike');
var withid = document.getElementById('withid');
var spikes = {name:"Spikes", description:"Do not eat me.", damage:"500" };

function itemClicked(id) {
	console.log(id);
	document.getElementById('withspike').innerHTML = spikes["description"];
    document.getElementById('withid').innerHTML = id["description"];
}

<style>
  #spikes {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #FF0000;
}
</style>

<div id="withspike"></div>
<div id="withid"></div>
<div onclick="itemClicked(id)" id="spikes"></div>

【问题讨论】：

id 在函数调用者中是一个字符串，或者在某些浏览器中是undefined（在onclick 属性中）。

标签： javascript html arrays arguments

【解决方案1】：

您可以将尖峰（以及未来的其他元素）放入包含对象中，并使用 id 从那里获取它：

var elements = {
   spikes:{name:"Spikes", description:"Do not eat me.", damage:"500" }
};

打电话

elements[id]["description"];

Fiddle

还有一个包含多个元素的额外示例（并在函数调用中使用 this 与 id）：

Fiddle2

【讨论】：

【解决方案2】：

避免混合 HTML 和 JavaScript 可能是明智之举。你可以这样做：

<div id="spikes"></div>

<script>
  var spikes = document.getElementById("spikes");
  spikes.addEventListener("click", function () {
    itemClicked(spikes);
  });
</script>

【讨论】：

【解决方案3】：

你应该使用它，传递元素本身，并遍历你想要的 dom 元素。

例如，用：

<div id="withspike"></div>
<div id="withid"></div>
<div onclick="itemClicked(this)" id="spikes"></div>

你可以使用这个功能：

function itemClicked(el) {
       var id = el.previousSibling.innerHTML; // Get previous sibling
       console.log(id);       
}

谢谢！

编辑。抱歉，我用了 id，而我本来打算用this！

【讨论】：