[英]Can I use if else statement with onclick?
I want to Sort array of objects by string property value. 我想按字符串属性值对对象数组进行排序。 So if I click a button, the values will be sorted.
因此,如果单击按钮,则将对值进行排序。 But only the first if statement works.
但是只有第一个if语句有效。 if I change the else if statement into the first if statement, it works but no matter what I do only the first if statement works.
如果我将else if语句更改为第一个if语句,则它可以工作,但是无论我做什么,只有第一个if语句可以工作。 What should I change to make all three buttons work?
我应该改变些什么才能使所有三个按钮正常工作?
var members = [{ name: "jar", join: "2017-2", sex: "f", age: "29" }, { name: "hrk", join: "2017-8", sex: "f", age: "21" }, { name: "jjk", join: "2014-6", sex: "m", age: "27" }, { name: "jsh", join: "2016-5", sex: "m", age: "37" }, { name: "kks", join: "2014-4", sex: "f", age: "42" }]; var list = ""; function func() { for (var i = 0; i < members.length; i++) { var val = document.getElementById('form').ans.value; if (members[i].join >= val || members[i].name == val || members[i].sex == val || members[i].age == val) { for (var key in members[i]) { if (key === "name" || key === "join" || key === "sex") { if (document.getElementById("namebtn").onclick) { var namesort = function(a, b) { if (a.name > b.name) { return 1; } else if (a.name < b.name) { return -1; } return 0; } members.sort(namesort); } else if (document.getElementById("joinbtn").onclick) { var joinsort = function(a, b) { if (a.join > b.join) { return 1; } else if (a.join < b.join) { return -1; } return 0; } members.sort(joinsort); } else if (document.getElementById("joinbtn").onclick) { var agesort = function(a, b) { if (a.age > b.age) { return 1; } else if (a.age < b.age) { return -1; } return 0; } members.sort(agesort); } br = " "; } else { br = "<br>"; } list += members[i][key] + br; } } } document.getElementById("title").innerHTML = title; document.getElementById("who").innerHTML = list; return false; }
<p id="title"></p> <p id="who"></p> <form action="#" id="form"> <input type="text" name="ans" placeholder="year"> <input type="submit" value="search" id="sub"> </form> <br> <input type="submit" onclick="func()" id="namebtn"> <input type="submit" onclick="func()" id="joinbtn"> <input type="submit" onclick="func()" id="agebtn">
if (document.getElementById('namebtn').onclick)
will always be true since the attribute is truthy. 由于属性为真,因此
if (document.getElementById('namebtn').onclick)
始终为true。
Are you trying to check which button was clicked? 您是否要检查单击了哪个按钮? If that's the case, your func should probably have an
id
or event
parameter ( function func(btnId or e) { ... }
) and then pass this.id
to func
: 在这种情况下,您的func可能应该具有
id
或event
参数( function func(btnId or e) { ... }
),然后将this.id
传递给func
:
<input type="submit" onclick="func(this.id or event)" id="namebtn">
Rather than checking document.getElementById("elementid").onclick
, you can find the target of the current click event. document.getElementById("elementid").onclick
检查document.getElementById("elementid").onclick
,而是可以找到当前单击事件的目标。 Look this example. 看这个例子。
var members = [{name: "jar",join: "2017-2",sex: "f",age: "29"}, {name: "hrk",join: "2017-8",sex: "f",age: "21"}, {name: "jjk",join: "2014-6",sex: "m",age: "27"}, {name: "jsh",join: "2016-5",sex: "m",age: "37"}, {name: "kks",join: "2014-4",sex: "f",age: "42"}]; var list = ""; function func(e) { for (var i = 0; i < members.length; i++) { var val = document.getElementById('form').ans.value; if (members[i].join >= val || members[i].name == val || members[i].sex == val || members[i].age == val) { for (var key in members[i]) { if (key === "name" || key === "join" || key === "sex") { if (e.currentTarget.id == "namebtn") { var namesort = function (a, b) { if (a.name > b.name) { return 1; } else if (a.name < b.name) { return -1; } return 0; } members.sort(namesort); } else if (e.currentTarget.id == "joinbtn") { var joinsort = function (a, b) { if ((new Date(a.join)).getTime() > (new Date(b.join)).getTime()) { return 1; } else if ((new Date(a.join)).getTime() < (new Date(b.join)).getTime()) { return -1; } return 0; } members.sort(joinsort); } else if (e.currentTarget.id == "agebtn") { var agesort = function (a, b) { if (parseInt(a.age) > parseInt(b.age)) { return 1; } else if (parseInt(a.age) < parseInt(b.age)) { return -1; } return 0; } members.sort(agesort); } br = " "; } else { br = "<br>"; } list += members[i][key] + br; } } } document.getElementById("title").innerHTML = title; document.getElementById("who").innerHTML = list; return false; }
<p id="title"></p> <p id="who"></p> <form action="#" id="form"> <input type="text" name="ans" placeholder="year"> <input type="submit" value="search" id="sub"> </form> <br> <input type="submit" onclick="func(event)" value="name" id="namebtn"> <input type="submit" onclick="func(event)" value="join" id="joinbtn"> <input type="submit" onclick="func(event)" value="age" id="agebtn">
Also you can use some better comparison methods for date and age. 您还可以使用一些更好的日期和年龄比较方法。 I have updated that in my code.
我已经在代码中对其进行了更新。
But only the first if statement works.
但是只有第一个if语句有效。 if I change the else if statement into the first if statement
如果我将else if语句更改为第一个if语句
Because onclick
value is not falsey and else
is unlikely to be executed. 因为
onclick
值不是false , else
不太可能执行。
What should I change to make all three buttons work?
我应该改变些什么才能使所有三个按钮正常工作?
You can simplify by passing the property by which sorting should happen, here is a demo of the same 您可以通过传递应该进行排序的属性来简化操作,这是相同示例的演示
var members = [ { name: "jar", join: "2017-2", sex: "f", age: "29" }, { name: "hrk", join: "2017-8", sex: "f", age: "21" }, { name: "jjk", join: "2014-6", sex: "m", age: "27" }, { name: "jsh", join: "2016-5", sex: "m", age: "37" }, { name: "kks", join: "2014-4", sex: "f", age: "42" } ]; var list = ""; function func( prop ) { sortObjByProp(members, prop); list = members.map( function( memberObj ){ return Object.keys( memberObj ).map( function( key ){ return "<span class='cell'>" + memberObj[ key ] + "</span>"; }).join( " " ); }).join( "<br>" ); document.getElementById("who").innerHTML = list; return false; } function sortObjByProp(obj, prop) { obj.sort(function(a, b) { return a[prop].localeCompare(b[prop]); //will work for numerics like age if the number of digits are same for all ages. }); }
.cell { display :inline-block; width: 80px; }
<p id="who"></p> <form action="#" id="form"> <input type="text" name="ans" placeholder="year"> <input type="submit" value="search" id="sub"> </form> <br> <input type="submit" onclick="func('name')" id="namebtn" value="sort by name"> <input type="submit" onclick="func('join')" id="joinbtn" value="sort by join"> <input type="submit" onclick="func('age')" id="agebtn" value="sort by age">
You can separate the logic by defining the sort functions outside of func
function, attach event handlers to each element using .addEventListener()
or .onclick
. 您可以通过在
func
函数之外定义排序函数来分离逻辑,使用.onclick
.addEventListener()
或.onclick
将事件处理程序附加到每个元素。 Call func()
within an event handler attached to the element. 在附加到元素的事件处理程序中调用
func()
。 Use var
to define variables, specifically br
and list
使用
var
定义变量,特别是br
和list
var members = [{ name: "jar", join: "2017-2", sex: "f", age: "29" }, { name: "hrk", join: "2017-8", sex: "f", age: "21" }, { name: "jjk", join: "2014-6", sex: "m", age: "27" }, { name: "jsh", join: "2016-5", sex: "m", age: "37" }, { name: "kks", join: "2014-4", sex: "f", age: "42" }]; var namesort = function(a, b) { if (a.name > b.name) { return 1; } else if (a.name < b.name) { return -1; } return 0; } var joinsort = function(a, b) { if (a.join > b.join) { return 1; } else if (a.join < b.join) { return -1; } return 0; } var agesort = function(a, b) { if (a.age > b.age) { return 1; } else if (a.age < b.age) { return -1; } return 0; } document.getElementById("joinbtn").onclick = function() { members.sort(joinsort); func(); }; document.getElementById("agebtn").onclick = function() { members.sort(agesort); func(); } document.getElementById("namebtn").onclick = function() { members.sort(namesort); func(); }; function func() { var br = ""; var list = ""; for (var i = 0; i < members.length; i++) { var val = document.getElementById('form').ans.value; if (members[i].join >= val || members[i].name == val || members[i].sex == val || members[i].age == val) { for (var key in members[i]) { if (key === "name" || key === "join" || key === "sex") { br = " "; } else { br = "<br>"; } list += members[i][key] + br; } } } // document.getElementById("title").innerHTML = title; document.getElementById("who").innerHTML = list; return false; }
<p id="title"></p> <p id="who"></p> <form id="form"> <input type="text" name="ans" placeholder="year"> <input type="button" value="search" id="sub"> </form> <br> <input type="button" id="namebtn" value="name"> <input type="button" id="joinbtn" value="join"> <input type="button" id="agebtn" value="age">
As rightly suggested by @ nitheesh , you should use event.currentTarget.id
instead of onClick
. 正如@ nitheesh正确建议的那样 ,您应该使用
event.currentTarget.id
而不是onClick
。
Few pointers, 很少的指针,
Note: These pointers are mere suggestions and are highly dependent on individual's perspective. 注意:这些指示仅是建议,在很大程度上取决于个人的观点。 If you think they help you in anyway, use them.
如果您认为它们有任何帮助,请使用它们。 If not, just ignore them.
如果没有,请忽略它们。
document.getElementById(...).onClick = function(){...}
, this will replace your original handler. document.getElementById(...).onClick = function(){...}
,则它将替换您的原始处理程序。 It might even break the logic addEventListener
for this. addEventListener
。 func
is a bad function name. func
是错误的函数名称。 A function name should denote its purpose. var members = [{ name: "jar", join: "2017-2", sex: "f", age: "29" }, { name: "hrk", join: "2017-8", sex: "f", age: "21" }, { name: "jjk", join: "2014-6", sex: "m", age: "27" }, { name: "jsh", join: "2016-5", sex: "m", age: "37" }, { name: "kks", join: "2014-4", sex: "f", age: "42" }]; function getMySortFn(key) { return function(a, b) { return a[key].localeCompare(b[key]); } } function func(e) { var list = ""; for (var i = 0; i < members.length; i++) { var val = document.getElementById('form').ans.value; if (members[i].join >= val || members[i].name == val || members[i].sex == val || members[i].age == val) { var shouldSort = ['namebtn', 'joinbtn', 'agebtn'].indexOf(e.currentTarget.id) > -1; for (var key in members[i]) { if (key === "name" || key === "join" || key === "sex") { if(shouldSort) { members.sort(getMySortFn(e.currentTarget.id.replace('btn', ''))); } br = " "; } else { br = "<br>"; } list += members[i][key] + br; } } } document.getElementById("title").innerHTML = title.innerHTML; document.getElementById("who").innerHTML = list; return false; } var btns = document.querySelectorAll('input[type="submit"]'); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', func); }
<p id="title"></p> <p id="who"></p> <form action="#" id="form"> <input type="text" name="ans" placeholder="year"> <input type="submit" value="search" id="sub"> </form> <br> <input type="submit" id="namebtn" value='name'> <input type="submit" id="joinbtn" value='join'> <input type="submit" id="agebtn" value='age'>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.