将参数传递给内联 javascript 函数

Question

我正在尝试通过循环为主页上的每个按钮分配一个功能。 当单击前三个按钮中的每一个时，它应该将会话存储中的一个项目设置为 true（草、软体动物或毛衣）。单击底部按钮时，应显示所有其他被单击的按钮以及植物一词。

例如 如果我单击“向我发送有关草的更多信息” 然后点击“您想了解更多信息的事情” 最后一个按钮应显示“草本植物” 如果我然后单击“向我发送有关软体动物的更多信息” 最后一个按钮应该显示“软体动物草植物”

我的 html 和 javascript 文件 （我已经指出我相当肯定的部分不能正常工作） （y[count].id 应该是“草”、“软体动物”或“毛衣”这个词） （infoChosen 是页面上的第四个也是最后一个按钮）

window.onload = function() {

  var y = document.getElementsByClassName("button");
  for (count = 0; count < y.length; count++) {
    if (y[count].id == "infoChosen") {
      y[count].onclick = function() {
        document.getElementById("infoChosen").innerHTML = "";
        if (sessionStorage["Molluscs"] == "true") {
          document.getElementById("infoChosen").innerHTML += "Green Molluscs\n";
        }
        if (sessionStorage["Sweaters"] == "true") {
          document.getElementById("infoChosen").innerHTML += "Green Sweaters\n";
        }
        if (sessionStorage["Grass"] == "true") {
          document.getElementById("infoChosen").innerHTML += "Grass\n";
        }
        if (sessionStorage["Plants"] == "true") {
          document.getElementById("infoChosen").innerHTML += "Plants\n";
        }
      }
    } else {
      /////////////AREA OF THE CODE THATS NOT WORKING///////////////////////
      y[count].onclick = (function(z) {
        sessionStorage.setItem(z, "true");
      })(y[count].id);
      /////////////AREA OF THE CODE THATS NOT WORKING////////////////////////
    }
    sessionStorage.setItem(y[count].id, "false");
  }
  sessionStorage.setItem("Plants", "true");
}

 			<div><button id="Grass" type="button" class="button">Send me more information about Grass</button></div>
		<div><button id="Molluscs" type="button" class="button">Send me more information about Green Molluscs</button></div>
		<div><button id="Sweaters" type="button" class="button">Send me more information about Green Sweaters</button></div>
		<div><button id="infoChosen" type="button" class="button">Things you want more information about </button></div>	
		<div id="displayInfo"></div>
		<div><a href="otherPage.html">Other Page</a></div>	

otherPage.html 只包含

    <a href="example.html">Example</a>  

Answer 1

您没有通过以下方式分配事件侦听器：

y[count].onclick = (function(z) {
    sessionStorage.setItem(z, "true");
})(y[count].id);

因为 IIFE（立即调用的函数表达式）会立即计算为其返回值。因为他们不返回任何东西，onclick 将是undefined。您应该设置一个闭包，然后返回一个将分配给 onclick 属性的函数，如下所示：

y[count].onclick = (function(z) {
    return function() { // return a function reference to be assigned to the onclick
        sessionStorage.setItem(z, "true");
    };
})(y[count].id);