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
3 answers
solution1
1 ACCPTED 2017-02-11 01:06:27
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>
solution2
0 2017-02-11 00:38:17
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.
solution3
0 2017-02-11 01:15:31
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
ofoperator. 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.