将参数传递给内联 javascript 函数

Question

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

例如如果我点击 "Send me more information about Grass" 然后点击 "Things you want more information about" 最后一个按钮应该显示 "Grass Plants" 如果我再点击 "Send me more information about Molluscs" 最后一个按钮应该显示 "Molluscs Grass Plants"

我的 html 和 javascript 文件（我已经指出我相当确定的部分不能正常工作）（y[count].id 应该是单词 "Grass"、"Molluscs" 或 "Sweaters"）（infoChosen 是页面上的第 4 个也是最后一个按钮）

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（立即调用的函数表达式）被立即评估为它们的 return 值。由于他们 return 什么都没有，因此 onclick 将是 undefined。您应该设置一个闭包，然后 return 一个将分配给 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);

将参数传递给内联 javascript 函数

Passing parameters to an inline javascript function

html

javascript

onclick

session-storage