random order of buttons on refresh in vanilla js
Random Order of Buttons on Refresh in Vanilla JS
As a web developer, I have faced an issue where the order of buttons on a page is changing randomly on refresh. This occurs due to the asynchronous nature of JavaScript and can be resolved by using Vanilla JS.
Method 1:
The first method to resolve this issue is by using the Math.random()
function. This function generates a random number between 0 and 1, which can then be used to shuffle the buttons on the page.
const buttons = document.querySelectorAll('.button');
const parent = document.querySelector('.button-container');
parent.appendChild(buttons[0]);
for (let i = 1; i < buttons.length; i++) {
const randomIndex = Math.floor(Math.random() * (i + 1));
parent.insertBefore(buttons[i], buttons[randomIndex]);
}
Method 2:
The second method is by using the Fisher-Yates Shuffle Algorithm. This algorithm loops through the array and swaps the current element with a randomly selected element from the remaining elements in the array.
const buttons = document.querySelectorAll('.button');
const parent = document.querySelector('.button-container');
for (let i = buttons.length - 1; i > 0; i--) {
const randomIndex = Math.floor(Math.random() * (i + 1));
[buttons[i], buttons[randomIndex]] = [buttons[randomIndex], buttons[i]];
}
buttons.forEach(button => parent.appendChild(button));
Both of these methods will randomly shuffle the order of the buttons on refresh and provide a better user experience.