Javascript - 通过用户输入使用排序按钮创建的列表

Question

我想要的：用户输入单词到输入栏 - >用户按下添加按钮 - >单词被添加到两个列表“unsortedUL”和“sortedUL” - >用户按下排序按钮 - >列表“sortedUL”按降序排序（za ），“unsortedUL”仍然是用户输入它的确切方式。

我无法弄清楚如何获得两个列表，而只有一个列表被排序。

var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write a word!");
  } else {
    document.getElementById("sortedUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("sortedUL");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("LI");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerhtml.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {           
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
document.getElementById("date").innerHTML = new Date().toDateString();
document.getElementById("time").innerHTML = new Date().toLocaleTimeString();

body {
  margin: 0;
  min-width: 250px;
  background-color: green;
}

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  float: right;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: number;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  text-align: center;


  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.header {
  background-color: green;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

.header:after {
  content: "";
  display: table;
  clear: both;
}

input {
  border: none;
  width: 50%;
  padding: 10px;
  float: center;
  font-size: 16px;
}

.addBtn {
  padding: 10px;
  width: 10%;
  background: #d9d9d9;
  color: #555;
  float: right;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
.sortBtn {
  padding: 10px;
  width: 10%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

<!DOCTYPE html>
<html>
<title>Assignment Two</title>
<body>
  <h1 style="color:white;"align="center"id="date"></h1>
  <h1 style="color:white;"align="center"id="time"></h1>

  <div id="myDIV" class="header">
    <h2 style="margin:5px">Enter a list of words</h2>
    <input type="text" id="myInput" placeholder="Word...">
    <span onclick="newElement()" class="addBtn">Add</span>
    <span onclick="sortList()" class="sortBtn">Sort</span>
  </div>

  <ul id="sortedUL">
  </ul>
  <ul id="unsortedUL">
  </ul>
</body>
</html>

Answer 1

另一答案

Answer 2

另一答案