I have been experimenting with arrays and created two buttons - PushUP and PushDown. The purpose of the PushUp button is to sort the array in ascending order, while the PushDown button sorts it in descending order. Despite my efforts, I have not been able to achieve the desired outcome. Can someone assist me on what code I need to write to obtain the following output? Additionally, how can I display this data before any Push button is clicked and then change the order based on the button clicked? For instance, initially displaying 2 buttons along with the data.
Upon clicking the mentioned buttons, the output should resemble something like this:
Original array:
1 xyz
2 abc, 123
3 asd
On clicking PushUp:
3 asd
1 xyz
2 abc, 123
On clicking PushDown:
1 xyz
2 abc, 123
3 asd
Here is a section of my code:
var details = [
{intro: "ABC"},
{due: " MON"},
{name: "XYZ", sn: "SN xxxxx"},
{lab: "Tuesday 4:30-6:30"}
];
function Push_Up(){
details.sort();
displayPUSH();
}
function displayPUSH() {
document.getElementById("up").innerHTML =
"<br>" +
"CSIT128" + " :" + details[0].intro + "<br><br>" +
"Assignment 5"+ ", " + details[1].due + "<br><br>" +
details[2].name + ", " + details[2].sn + "<br><br>" +
"Computer LAB" + " :" + details[3].lab + "<br><br>";
}
function Push_Down(){
var details_after ="";
for ( var i=0; i<details.length; i++ )
{
displayPUSH();
}
document.getElementById("down").innerHTML = details_after;
}<button onClick="Push_Up()"> Push Up </button>
<br>
<div id="up">
</div>
<button onClick="Push_Down()"> Push Down </button>
<br>
<div id="down">
</div>
<br>