I am trying to reorder the "divs" (pushed into the DOM via Javascript) with the onclick of a button. Specifically, I'm looking for a Javascript function to reach in and compare the content of the "divs" and reorder the flex items into a descending order. Any solutions are appreciated. Thank you.
let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")
let numArr = []
let numInc = 0
let child = document.getElementsByClassName(`child${numInc}`)
// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
numInc = numInc 1;
numArr.push(numInc);
console.log(numArr);
container.innerHTML = `<div >${numInc}</div>`;
console.log(`child${numInc}`)
})
// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",()=>{
numArr.sort(function(a, b){return b-a});
console.log(numArr)
console.log(`child${numInc}`)
})
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: hsl(0,100%,80%);
}
.child {
padding: 10px;
background: hsl(180,100%,70%);
border: solid black 3px;
margin: 10px;
width: 3em;
text-align: center;
}
<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>
CodePudding user response:
If all you want to do is reverse the order of the items, there are two ways to accomplish this: using the column-reverse
CSS value, or reinserting the elements into DOM.
CSS column-reverse
The flex-direction CSS property, as you are using in your code, can take a value called column-reverse
. This will show the elements in a column, but in reversed order.
Therefore, all your onclick has to do is attach a class to the parent div which changes the flex-direction.
orderBtn.addEventListener("click",() => {
container.classList.add("reversed")
})
let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")
let numArr = []
let numInc = 0
let child = document.getElementsByClassName(`child${numInc}`)
// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
numInc = numInc 1;
numArr.push(numInc);
container.innerHTML = `<div >${numInc}</div>`;
})
// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",() => {
container.classList.add("reversed")
})
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: hsl(0,100%,80%);
}
#container.reversed {
flex-direction: column-reverse;
}
.child {
padding: 10px;
background: hsl(180,100%,70%);
border: solid black 3px;
margin: 10px;
width: 3em;
text-align: center;
}
<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>
Reinserting the Elements
If you want to actually reorder the elements physically, then you have to re-insert them into the DOM in the order that you want; reversing an array isn't enough.
This method is more flexible, meaning you can put the elements in any order (for instance, sorting by price), whereas the column-reverse
method strictly reverses the order.
orderBtn.addEventListener("click",() => {
const reversed = Array.from(container.children).reverse();
container.append(...reversed);
})
let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")
let numArr = []
let numInc = 0
let child = document.getElementsByClassName(`child${numInc}`)
// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
numInc = numInc 1;
numArr.push(numInc);
container.innerHTML = `<div >${numInc}</div>`;
})
// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",() => {
const reversed = Array.from(container.children).reverse();
container.append(...reversed);
})
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: hsl(0,100%,80%);
}
.child {
padding: 10px;
background: hsl(180,100%,70%);
border: solid black 3px;
margin: 10px;
width: 3em;
text-align: center;
}
<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>