如何在html javascript中添加另一个功能但不同的按钮
[英]how to add another function but different button in html javascript
问题描述
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
当我按下原始顺序按钮时，我想以原始顺序显示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>
i want to add a different function for Alphabetical order and Reverse order我想为字母顺序和倒序添加不同的功能
3 个解决方案
解决方案1
0 2022-05-23 10:29:21
The script tag is usually just before the closing </body> tag. script 标签通常在结束</body>标签之前。
To reverse an array: myArray.reverse() .反转数组： myArray.reverse() 。
To sort an array: myArray.sort() .对数组进行排序： myArray.sort() 。
I wrote a helper function display(array) that does the task of displaying the given array into the #result div.我编写了一个辅助函数display(array)来完成将给定数组显示到#result div 中的任务。
I also saved the #result div in a constant so we have to compute it only once.我还将#result div 保存在一个常量中，因此我们只需计算一次。
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>
解决方案2
0 已采纳 2022-05-23 10:39:29
To sort array you can use sort() function.要对数组进行排序，您可以使用sort()函数。 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.此外，要保留原始数组，您可以使用[...myArray]方法来使用它的元素 - 在这种情况下，您将基于原始数组创建新数组，而无需更改。
To reverse array, use reverse() function.要反转数组，请使用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>
解决方案3
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我使用了temp变量，因为sort() 和 reverse()方法修改了数组
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.