how to add another function but different button in html javascript-CodePudding

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

   <div id="result"></div>
   <button onclick="Org()">Original Order </button>
  
<script>
{
    var myArray=["Book1","Book2","Book3","Book4"]
     function Org(){
var display = myArray.toString();
document.getElementById("result").innerHTML = display;
}
}
  

  
  <button onclick="Alp()">Alphabetical Order</button>
  
  <button onclick="Rev()">Reverse Order</button>
  
</body>
</html>

i want to add a different function for Alphabetical order and Reverse order

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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>