I want to show arraylist in original order when i press the original order button and When i press the alphabetical i want to show the alphabetical order of the books i've only done the original order and I tried doing the same thing when adding the alp order but nothing happens here's the code
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>i want to add a different function for Alphabetical order and Reverse order
The script tag is usually just before the closing </body> tag.
To reverse an array: myArray.reverse().
To sort an array: myArray.sort().
I wrote a helper function display(array) that does the task of displaying the given array into the #result div.
I also saved the #result div in a constant so we have to compute it only once.
So you get:
<!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>
To sort array you can use sort() function. Check article.
Also, to keep original array, you can use it's elements by using [...myArray] approach - in this case you will create new array, based on original array without changes.
To reverse array, use reverse() function.
// 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)
}
I used temp variable because the sort() and reverse() methods modify the arrays in place