我可以使用if onclick语句和onclick吗？

Question

我想按string属性值对对象数组进行排序。因此，如果我单击一个按钮，这些值将被排序。但只有第一个if语句起作用。如果我将else语句更改为第一个if语句，它会工作，但无论我做什么，第一个if语句都有效。我该怎么做才能使这三个按钮都工作呢？

​

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

​

Answer 1

if (document.getElementById('namebtn').onclick)将始终为真，因为该属性是真实的。

你是想看看哪个按钮被点击了吗？如果是这样的话，您的函数应该有一个id或event参数(function func(btnId or e) { ... })，然后将this.id传递给func

<input type="submit" onclick="func(this.id or event)" id="namebtn">

Answer 2

您可以找到当前单击事件的目标，而不是检查document.getElementById("elementid").onclick。看这个例子。

​

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

​

此外，您也可以使用一些更好的比较方法的日期和年龄。我已经在代码中更新了这一点。

Answer 3

但只有第一个if语句起作用。如果我将else if语句更改为第一个if语句

因为onclick值不是，所以和else不太可能被执行。

我该怎么做才能使这三个按钮都工作呢？

您可以通过传递应该进行排序的属性来简化，下面是一个相同的演示

​

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

​