將參數傳遞給內嵌javascript函數

Question

我想通過循環爲我的主頁上的每個按鈕分配一個函數。 當每個前三個按鈕被點擊時，它應該將會話存儲中的項目設置爲true（草，軟體動物或毛衣）。當最下面的按鈕被點擊時，它應該顯示被點擊的所有其他按鈕以及植物字。

例如 如果我點擊「向我發送有關草詳細信息」 ，然後單擊「事情你想了解更多信息」，然後 最後一個按鈕應顯示「禾本科植物」 如果我再點擊「發送給我更多關於軟體動物信息」 最後一個按鈕應該就會顯示‘貝類禾本科植物’

我的HTML和JavaScript文件 （我已經表示對此我相當肯定是不正常的部分） （Y [計數。編號應該是「草」，「軟體動物」或「毛衣」一詞） （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"); 
 
}

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

otherPage.html只包含

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

Answer 1

您不受此分配事件偵聽器：

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

因爲IIFE（ imediately被調用的函數表達式）被立即評估爲它們的返回值。由於他們不返回任何東西，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);