Lo que quiero: el usuario escribe la palabra en la barra de entrada -> el usuario presiona el botón Agregar -> la palabra se agrega a dos listas "unsortedUL" y "sortedUL" -> el usuario presiona el botón Ordenar -> la lista "sortedUL" se ordena descendiendo (za ), mientras que "unsortedUL" permanece exactamente como lo ingresó el usuario.

No puedo entender cómo obtener DOS listas mientras que UNA de ellas está ordenada.

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> 
0
T.K. Brooks 28 feb. 2018 a las 12:58

3 respuestas

La mejor respuesta

Debe clonar el nodo HTML para agregarlo dos veces. O crearlo dos veces como lo hice.

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> 
1
Sandwell 28 feb. 2018 a las 10:30

Si bien necesita una lista, puede usar la matriz de JavaScript Aquí puede tener dos matrices que serían SortedList y UnsortedList. He declarado ambas listas globalmente para que pueda ordenar una lista y mantener una lista sin cambios. Consulte el siguiente código para el flujo de trabajo

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form>
        <div>
            <input type="text" name="txtName" id="txtName"/>
            <input type="button" value="Add" onclick="AddToList()"/>
            <input type="button" value="Sort" onclick="SortList()"/>
        </div>
    </form>
</body>
</html>

<script>
    var sortedList = [];
    var unsortedList = [];
    function AddToList() {
        var data = document.getElementById("txtName").value;
        sortedList.push(data);
        unsortedList.push(data);
    }

    function SortList() {
        sortedList.sort();
        sortedList.reverse();
        console.log(sortedList);
        console.log(unsortedList);
    }
</script>

Aquí he creado dos botones como dijiste Y llamó una función para ordenar y otra para agregar en la Lista. Como dijiste, necesitas que la Lista sin clasificar esté como está, así que en la función SortList() hemos impreso sortedList y unsortedList. Ambos dos ven una diferencia.

Como se esperaba, sortedList imprimirá los datos del orden descendente y unsortedList imprimirá los datos normales.

0
Jaffar 28 feb. 2018 a las 10:27

Solo necesita insertarlo en ambas listas a medida que se agrega cada palabra, es decir, donde tiene:

document.getElementById("sortedUL").appendChild(li);

Deberías agregar una segunda línea como esta:

document.getElementById("unsortedUL").appendChild(li.cloneNode(true));

La clonación de nodos podría ser lo que faltaba si lo intentara antes, de lo contrario, movería el mismo elemento y termina en una sola lista. El argumento 'verdadero' hace una copia profunda para que el nodo de texto debajo de él también se copie.

Por cierto, toda esta operación sería mucho más fácil con jQuery, es el tipo de manipulación DOM para la que estaba destinada la biblioteca. Sin embargo, la gente salta a jQuery tan rápido y es bueno que lo estés haciendo con JavaScript de vainilla.

0
tmdesigned 28 feb. 2018 a las 10:28