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

我想要的:用户在输入栏中输入单词 -> 用户按下添加按钮 -> 单词被添加到两个列表“unsortedUL”和“sortedUL” -> 用户按下排序按钮 -> 列表“sortedUL”排序降序 (z-a)，而“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>

最佳答案

您必须克隆 HTML 节点才能将其附加两次。或者像我一样创建两次。

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() {
  if (inputValue === '') {
    alert("You must write a word!");
  } else {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    document.getElementById("sortedUL").appendChild(li);
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    document.getElementById("unsortedUL").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;
}

p {
  font-size: 16px;
  margin-left: 20px;
  color: white;
  text-transform: uppercase;
}

ul {
  margin: 0 0 20px 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>
  <p>Sorted</p>
  <ul id="sortedUL">
  </ul>
  <p>Unsorted</p>
  <ul id="unsortedUL">
  </ul>
</body>
</html>

关于Javascript - 通过用户输入和排序按钮创建的列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49026667/

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

上一篇：javascript - 使用 PHP 操作文件从 HTML 输入表单发布数据，无需刷新页面

下一篇：javascript - React-highcharts 与 highcharts