将功能分配给javascript按钮数组

Question

当我单击这些按钮时，我希望将sessionStorage中的项目分配为true，这表示按下了按钮。 单击第四个按钮时，它是用来显示选择了哪些信息以了解更多信息。

现在我的按钮什么也没返回，我想不通如何遍历这个过程并为每个按钮分配一个功能

//simple html to print four buttons.
<!DOCTYPE html>
<html>
    <head>
        <title>Green Things</title>
        <script type="text/javascript" src="example.js"></script>
    </head>

    <body>
            <div><button id="moreAboutGrass" type="button" class="button">Send me more information about Grass</button></div>
            <div><button id="moreAboutMolluscs" type="button" class="button">Send me more information about Green Molluscs</button></div>
            <div><button id="moreAboutSweaters" 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><output id = "output"></output></div>
    </body>

</html>

window.onload = function() {
//getting an array of all the buttons
    var y = document.getElementsByClassName("button");
//looping through all the buttons
    for(count = 0; count < y.length; count++){
             //Assigning an operation to the button
            document.getElementById(y[count].id).onclick = function(count) {
            //Assigning a variable to be the id name of button passed into this function
            z = y[arguments[i]].id;
            //If the button is the fourth button
            if ( z == "infoChosen" ){
            //Add in the things which were selected
                document.getElementById("output").innerHTML = "";
                if (sessionStorage["moreAboutMolluscs"] == "true"){
                    document.getElementById("output").innerHTML += "Green Molluscs\n";
                }
                if (sessionStorage["moreAboutSweaters"] == "true"){
                    document.getElementById("output").innerHTML += "Green Sweaters\n";
                }
                if (sessionStorage["moreAboutGrass"] == "true"){
                    document.getElementById("output").innerHTML += "Grass\n";
                }
            }else{          
                //if the button was on of the first 3 just set a variable to true so it can be printed later
                sessionStorage.setItem(z, "true");
            }
        }
}

如果单击第一个按钮，然后单击第四个按钮，则输出应为

Green Molluscs

如果单击第一个和第三个按钮，然后单击第四个按钮，则输出为

Green Molluscs Green Sweaters

我需要循环执行

Answer 1

尝试这个

 <!DOCTYPE html> <html> <head> <title>Green Things</title> <script type="text/javascript"> window.onload = function() { //getting an array of all the buttons var y = document.getElementsByClassName("button"); //looping through all the buttons for(count = 0; count < y.length; count++){ //Assigning an operation to the button var aa = y[count].id; document.getElementById(y[count].id).onclick = function(aa) { var z = aa.currentTarget["id"]; if ( z == "infoChosen" ){ document.getElementById("output").innerHTML = ""; if (sessionStorage["moreAboutMolluscs"] == "true"){ document.getElementById("output").innerHTML += "Green Molluscs\\n"; } if (sessionStorage["moreAboutSweaters"] == "true"){ document.getElementById("output").innerHTML += "Green Sweaters\\n"; } if (sessionStorage["moreAboutGrass"] == "true"){ document.getElementById("output").innerHTML += "Grass\\n"; } }else{ //if the button was on of the first 3 just set a variable to true so it can be printed later sessionStorage.setItem(z, "true"); } } } } </script> </head> <body> <div><button id="moreAboutGrass" type="button" class="button">Send me more information about Grass</button></div> <div><button id="moreAboutMolluscs" type="button" class="button">Send me more information about Green Molluscs</button></div> <div><button id="moreAboutSweaters" 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><output id = "output"></output></div> </body> </html>

Answer 2

在这种情况下，我会做不同的事情。 在我看来，最好的选择是为每个按钮创建一个函数，例如<button onclick="myFunction()">Click me</button>然后该函数会将变量更改为true或false。 而且，当您单击第四个按钮时，也可能是最好的选择，对于正确的输出，每种可能性都应使用switch语句。

我还没有那么丰富的编码经验，所以这可能不是最有效的方法，但是希望对您有所帮助。

Answer 3

好吧，首先，您没有正确访问sessionStorage 。 看到这个。 而且您正在做的事情看起来有点混乱。 我在下面的答案中整理了代码，因此在这里仅作一些解释。

我决定使用document.getElementsByTagName("button");来获取所有按钮document.getElementsByTagName("button"); 它可能并不总是适用，但是适合您的情况。
我将使用长度的for循环更改为仅使用of运算符。 它基本上遍历数组，而无需对其进行长度调整。
我认为有关将内容放入sessionStorage的其他部分很简单，但是如果您不确定，请问我，我会重写它。

jsfiddle： https ://jsfiddle.net/ryvcvp42/

将功能分配给javascript按钮数组

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-02-11 01:06:27

解决方案2
0 2017-02-11 00:38:17

解决方案3
0 2017-02-11 01:15:31

将功能分配给javascript按钮数组

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-02-11 01:06:27

解决方案2 0 2017-02-11 00:38:17

解决方案3 0 2017-02-11 01:15:31

解决方案1
1 已采纳 2017-02-11 01:06:27

解决方案2
0 2017-02-11 00:38:17

解决方案3
0 2017-02-11 01:15:31