Передача параметров встроенной функции javascript

Question

Я пытаюсь назначить функцию каждой кнопке на моей домашней странице через цикл. Когда каждая из первых трех кнопок нажата, она должна установить для элемента в хранилище сеанса значение true (либо трава, моллюски, либо свитера). Когда нажата нижняя кнопка, она должна отображать все остальные кнопки, которые были нажаты, плюс слово «растения».

Например Если я нажимаю «Отправить мне больше информации о траве» А затем нажмите «То, что вы хотите получить больше информации о» Последняя кнопка должна затем отобразить «травянистые растения» Если я после этого нажмите кнопку «Отправить мне больше информация о моллюсках» последняя кнопка должна затем отобразить„Моллюски травянистых растений“

Мой HTML и JavaScript файлы (я указал часть которой я довольно уверен, не работает должным образом) (у [число]. id должно быть слово «Трава», «Моллюски» или «Свитера») (информацияКоценка - четвертая и последняя кнопка на странице)

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);