當我按下原始順序按鈕時，我想以原始順序顯示arraylist，當我按下字母順序時，我想顯示書籍的字母順序，我只完成了原始順序，我嘗試在添加 alp 時做同樣的事情訂單但沒有任何反應這是代碼
<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>
我想為字母順序和倒序添加不同的功能
uj5u.com熱心網友回復：
要對陣列進行排序，您可以使用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>uj5u.com熱心網友回復：
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)
}
我使用了臨時變數，因為sort() 和 reverse()方法修改了陣列
uj5u.com熱心網友回復：
腳本標簽通常就在結束</body>標簽之前。
反轉陣列：myArray.reverse().
對陣列進行排序：myArray.sort().
我撰寫了一個輔助函式display(array)來完成將給定陣列顯示到#resultdiv 中的任務。
我還將#resultdiv 保存在一個常量中，因此我們只需計算一次。
所以你得到：
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480330.html
標籤：javascript html
上一篇：帶有CSS的文本溢位影像效果？
下一篇：HTML表格條件單元格顏色值范圍