Quiero mostrar la lista de arreglos en el orden original cuando presiono el botón de orden original y cuando presiono el alfabético quiero mostrar el orden alfabético de los libros. Solo hice el orden original e intenté hacer lo mismo al agregar el alp. orden pero no pasa nada aqui esta el codigo
var myArray = ["Book1", "Book2", "Book3", "Book4" ]; function Org() { var display = myArray.toString(); document.getElementById("result").innerHTML = display; } <div id="result"></div> <button onclick="Org()">Original Order </button> <button onclick="Alp()"> Alphabetical Order</button> <button onclick="Rev()"> Reverse Order</button>quiero agregar una función diferente para el orden alfabético y el orden inverso
La etiqueta del script suele estar justo antes de la etiqueta de cierre </body> .
Para invertir una matriz: myArray.reverse() .
Para ordenar una matriz: myArray.sort() .
Escribí una display(array) que hace la tarea de mostrar la matriz dada en el div #result .
También guardé el div #result en una constante, así que tenemos que calcularlo solo una vez.
Entonces obtienes:
<!DOCTYPE html> <html> <head> //... </head> <body> //... <div id="result"></div> <button onclick="Org()">Original Order </button> <button onclick="Alp()">Alphabetical Order</button> <button onclick="Rev()">Reverse Order</button> <script> const myArray=["Book1","Book2","Book3","Book4"]; const resultElement = document.getElementById('result'); function display(array){ const displayString = array.toString(); resultElement.innerHTML = displayString; } function Org(){ display(myArray); } function Alp(){ display(myArray.sort()); } function Rev(){ display(myArray.reverse()); } </script> </body> </html>Para ordenar la matriz, puede usar la función sort() . Consultar artículo.
Además, para mantener la matriz original, puede usar sus elementos utilizando el enfoque [...myArray] ; en este caso, creará una nueva matriz, basada en la matriz original sin cambios.
Para invertir la matriz, use la función reverse() .
// original array with strings const myArray = ["Book1", "Book2", "Book3", "Book4"]; // getting result container const resultContainer = document.querySelector("#result"); // render original array const Org = () => { const display = [...myArray]; renderList(display); } // render sorted array const Alp = () => { const display = [...myArray].sort(); renderList(display); } // render reverted array const Rev = () => { const display = [...myArray].sort().reverse(); renderList(display); } // render function itself const renderList = (arr) => { // clear prev rendered list resultContainer.innerHTML = null; // create temporary container const tmpContainer = document.createDocumentFragment(); arr.map(item => { // create temporary list element const tmpLi = document.createElement('li'); // add text content to li element tmpLi.innerText = item; // add list item to temporary container tmpContainer.append(tmpLi); }); // add content (list items) from temporary container to render container resultContainer.append(tmpContainer); } // call render of origin list Org(); <ul id="result"></ul> <button onclick="Org()">Original Order </button> <button onclick="Alp()"> Alphabetical Order</button> <button onclick="Rev()"> Reverse Order</button>function Alp() { let temp = [...myArray]; temp.sort(); // code to insert in the view (innerHTML concept);}
function Rev() { let temp = [...myArray]; temp.sort(); temp.reverse(); // code to insert in the view (innerHTML concept)}
Usé la variable temporal porque los métodos sort() y reverse() modifican las matrices en su lugar