將功能分配給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