将功能分配给javascript按钮数组
[英]Assigning a function to an array of javascript buttons
问题描述
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. 
当我单击这些按钮时，我希望将sessionStorage中的项目分配为true，这表示按下了按钮。 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 个解决方案
解决方案1
1 已采纳 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>
解决方案2
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. 在我看来，最好的选择是为每个按钮创建一个函数，例如<button onclick="myFunction()">Click me</button>然后该函数会将变量更改为true或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. 而且，当您单击第四个按钮时，也可能是最好的选择，对于正确的输出，每种可能性都应使用switch语句。
I am not that experienced in coding yet so this might not be the most efficient way but I hope this helped you. 我还没有那么丰富的编码经验，所以这可能不是最有效的方法，但是希望对您有所帮助。
解决方案3
0 2017-02-11 01:15:31
Well, firstly, you're not accessing your sessionStorage correctly. 好吧，首先，您没有正确访问sessionStorage 。 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");我决定使用document.getElementsByTagName("button");来获取所有按钮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.我将使用长度的for循环更改为仅使用of运算符。 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.
我认为有关将内容放入sessionStorage的其他部分很简单，但是如果您不确定，请问我，我会重写它。
jsfiddle: https://jsfiddle.net/ryvcvp42/ jsfiddle： https ://jsfiddle.net/ryvcvp42/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.