Assigning a function to an array of javascript buttons

Question

When I click on of these button I want an item in sessionStorage to be assigned to true which is indicative of the button which was pressed. When the fourth button is clicked I was it to show what information was selected to know more about.

Right now my button aren't returning anything and I can't figure out how to loop through this and assign a function to every button

//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");
            }
        }
}

If the first button and then the fourth button is clicked the output should be

Green Molluscs

If the first and third button are clicked and then the fourth the output should be

Green Molluscs Green Sweaters

I need to do it in a loop

what's in example.js

A. L
– A. L

2017-02-11 00:57:16 +00:00
Commented Feb 11, 2017 at 0:57 — A. L
– A. L, Commented Feb 11, 2017 at 0:57

Saurabh Agrawal · Accepted Answer · 2017-02-11 01:06:27Z

Try this

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

Mockser · Accepted Answer · 2017-02-11 00:38:17Z

0

I would do it differently in this situation. In my eyes the best option is to make a function for each button like this <button onclick="myFunction()">Click me</button>and that function changes a variable too true or false. And when you click the 4th button it might be the best too use the switch statement for each possibility for the right output.

I am not that experienced in coding yet so this might not be the most efficient way but I hope this helped you.

answered Feb 11, 2017 at 0:38

Mockser

11 bronze badge

Comments

A. L · Accepted Answer · 2017-02-11 01:15:31Z

0

Well, firstly, you're not accessing your sessionStorage correctly. See this. And what you're doing looks a bit like a mess. I've tidied up the code in my answer below so I'll just make some explanations here.

I decided to grab all your buttons using document.getElementsByTagName("button"); it may not always be applicable, but it feels suitable in your case.
I've changed using a for loop using length, to just using the of operator. It basically iterates through an array without needing to length it.
I think the other parts concerning putting stuff into the sessionStorage is pretty straight forward, but if you are unsure, just ask me and I'll rewrite it.

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

answered Feb 11, 2017 at 1:15

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Collectives™ on Stack Overflow

Assigning a function to an array of javascript buttons

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related