how to add another function but different button in html javascript
Question
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
3 answers
solution1
0 2022-05-23 10:29:21
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>
solution2
0 ACCPTED 2022-05-23 10:39:29
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>
solution3
0 2022-05-23 10:45:12
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.