如何在html javascript中添加另一個功能但不同的按鈕

Question

當我按下原始順序按鈕時，我想以原始順序顯示arraylist，當我按下字母順序時，我想顯示書籍的字母順序，我只完成了原始順序，我嘗試在添加 alp 時做同樣的事情訂單但沒有任何反應這是代碼

 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>

我想為字母順序和倒序添加不同的功能

Answer 1

script 標簽通常在結束</body>標簽之前。

反轉數組： myArray.reverse() 。

對數組進行排序： myArray.sort() 。

我編寫了一個輔助函數display(array)來完成將給定數組顯示到#result div 中的任務。

我還將#result div 保存在一個常量中，因此我們只需計算一次。

所以你得到：

<!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>

Answer 2

要對數組進行排序，您可以使用sort()函數。 檢查文章。

此外，要保留原始數組，您可以使用[...myArray]方法來使用它的元素 - 在這種情況下，您將基於原始數組創建新數組，而無需更改。

要反轉數組，請使用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>

Answer 3

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)

}

我使用了temp變量，因為sort() 和 reverse()方法修改了數組

如何在html javascript中添加另一個功能但不同的按鈕

問題描述

3 個解決方案

解決方案1
0 2022-05-23 10:29:21

解決方案2
0 已采納 2022-05-23 10:39:29

解決方案3
0 2022-05-23 10:45:12

如何在html javascript中添加另一個功能但不同的按鈕

問題描述

3 個解決方案

解決方案1 0 2022-05-23 10:29:21

解決方案2 0 已采納 2022-05-23 10:39:29

解決方案3 0 2022-05-23 10:45:12

解決方案1
0 2022-05-23 10:29:21

解決方案2
0 已采納 2022-05-23 10:39:29

解決方案3
0 2022-05-23 10:45:12