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

试试这个

＆＃13;

<!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>

＆＃13;

Answer 2

在这种情况下，我会采用不同的方式。在我看来，最好的选择是为每个按钮创建一个函数，如<button onclick="myFunction()">Click me</button>，该函数将变量设置为true或false。当你点击第4个按钮时，最好也可以使用switch语句来获得正确输出的每种可能性。

我对编码没有经验，所以这可能不是最有效的方法，但我希望这对你有帮助。

Answer 3

首先，您没有正确访问sessionStorage。见this。而你所做的事情看起来有点乱。我在下面的回答中整理了代码，所以我在这里做一些解释。

我决定使用document.getElementsByTagName("button");抓取所有按钮，但可能并不总是适用，但感觉适合你的情况。
我使用长度使用for循环更改为仅使用of运算符。它基本上遍历一个数组而不需要加长它。
我认为将内容放入sessionStorage的其他部分非常简单，但如果您不确定，请问我，我会重写它。

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

将函数分配给javascript按钮数组

3 个答案: