Tengo una página html con 3 párrafos y un botón. En mi archivo JavaScript, creé una función que agrega 3 párrafos nuevos a la página cada vez que presiono el botón. Estos 3 nuevos párrafos deben ser copias de los existentes, pero deben agregarse cada vez en un orden aleatorio. Aquí está mi función
const body = document.querySelector("#body"); const paragraphs = document.querySelector(".paragraph"); const btnHitMe = document.querySelector("#btn"); const addParagraphs = () => { Array.prototype.forEach.call(paragraphs, (el) => { const node = document.createElement("P"); node.innerHTML = el.innerHTML; body.insertBefore(node, btnHitMe); }); }El código anterior agrega los párrafos con éxito. Mi problema es ¿cómo agrego estos párrafos en orden aleatorio cada vez que presiono el botón?
En primer lugar, querySelector solo devuelve el primer elemento seleccionado.
Utilice querySelectorAll en su lugar.
En segundo lugar, elija uno de los algoritmos de reproducción aleatoria mencionados en otra publicación , luego utilícelo para mezclar paragraphs antes de recorrerlo.
const paragraphs = document.querySelectorAll(".paragraph"); // <- here // .... // shuffle function should be added from: https://stackoverflow.com/a/2450976/747579 let randomizedParagraphs = shuffle(Array.prototype.slice.call(paragraphs)) // <-- here Array.prototype.forEach.call(randomizedParagraphs, (el) => { // <- here //....