javascript - 尝试使用 javascript 对我的 html 中的列表进行排序

Question

我在使用下面的代码时遇到了一些问题:

HTML:

<p>click to <a onclick ="sortList(); return false;" href="#">sort</a></p>
<ul id="fruits">
  <li>apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

Javascript:

function sortList(listId) {
    var list = document.getElementbyId(listId);
    var children = list.childNodes;

    var listItemsHTML = new Array();
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeName === "LI") {
            listItemsHTML.push(children[i].innerHTML);
        }
    }
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

但是，当我尝试单击链接对 html 进行排序时，什么也没做，我不确定问题出在哪里。我正在引用并能够使用 changeit 和 echo 函数在 .js 文件中生成一条警报消息，只是无法排序

Answer 1

您需要将 listId 作为参数传递给函数，例如 onclick ="sortList('fruits'); return false;" 并更改 document.getElementbyId() 到 document.getElementById() 这是一个拼写错误

function sortList(listId) {
    var list = document.getElementById(listId);
    var children = list.childNodes;

    var listItemsHTML = new Array();
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeName === "LI") {
            listItemsHTML.push(children[i].innerHTML);
        }
    }
    console.log(listItemsHTML);
    listItemsHTML.sort();
    list.innerHTML="";
    for (var i = 0; i < listItemsHTML.length; i++) {
        list.innerHTML += "<li>" + listItemsHTML[i] + "</li>";
    }
}

<p>click to <a onclick ="sortList('fruits'); return false;" href="#">sort</a></p>
          <ul id="fruits">
          <li>apple</li>
          <li>orange</li>
          <li>banana</li>
          </ul>