I made script for sorting (A to Z)
My question is what I need to add to this to have unsort function, I mean set to default (how it was before you sort them).
Code:
function sortList() {
document.getElementById('sortedtxt').innerHTML = 'Sorted A-Z';
document.getElementById('sortedtitle').innerHTML = 'BFMAS - Sorted A-Z';
var list, i, switching, b, shouldSwitch;
list = document.getElementById("sortingUL");
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;
}
}
}
CodePudding user response:
Please use this code JS & HTML
let globalList, temp = [], sorted = true; document.getElementById("sort").addEventListener('click', sortList); document.getElementById("unsorted").addEventListener('click', UnsortedList); function UnsortedList() { let currentList = document.getElementById("countries"); currentList.innerHTML = ''; temp.forEach(function (item) { let li = document.createElement('li'); currentList.appendChild(li); li.innerHTML = item; }); sorted = true; } function getTempArray(pList) { globalList = pList.getElementsByTagName("li"); temp = []; for (let j = 0; j < globalList.length; j ) { temp.push(globalList[j].innerText); } } function sortList() { let list, i, switching, b, shouldSwitch; list = document.getElementById("countries"); if (sorted === true) { getTempArray(list); sorted = false; } 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; } } }
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Pues </title> </head> <body> <p>Click the button to sort the list alphabetically