[英]How do I add another validation function to an html button using javascript or jquery?
[英]how to add another function but different button in html javascript
当我按下原始顺序按钮时,我想以原始顺序显示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>
我想为字母顺序和倒序添加不同的功能
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>
要对数组进行排序,您可以使用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>
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()方法修改了数组
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.