0

Estoy realizando un formulario de sorteo.

Tengo un textarea en donde están todos los participantes (1 participante por fila).

Lo que quiero hacer es que al hacer click en el botón "Sortear" el orden de las filas del textarea empiecen a cambiar aleatoriamente y el usuario pueda ver que se esta barajeando.

Al hacer click en el botón "detener" se dejara de barajear.

introducir la descripción de la imagen aquí

E estado pensando en cambiar el orden aleatoriamente desde un array pero el problema es que necesito que el usuario vea que se esta barajeando.

1
  • Puedes pasar el html y lo que has probado a hacer?
    – AQMR
    Commented el 26 mar. 2021 a las 9:41

1 respuesta 1

1

window.addEventListener('load', ()=>{
    let btn = getBtn();

    btn.addEventListener('click', ()=>{
        getElements(btn);
    });
})
function getBtn(){
    return document.querySelector('.random');
}

function getElements(btn){
    //obtenemos el valor del textarea
    let txt = document.querySelector('.txt').value;
    //obtenemos el número de líneas como array
    let spl = txt.split('\n');

    //comenzamos a randomizar
    startRandom(btn, txt, spl);
}

function startRandom(btn, txt, spl){
    //sustituimos el boton de start por stop
    let stop = sustituteBtn(btn);

    //declaramos un intervalo
    let itv = 1000;
    //iniciamos el intervalo
    let interval = setInterval(function(){
        //declaramos dos rng con max
        let rng = randomSplValue(spl);
        let rpg = randomSplValue(spl);

        //intercambiamos variables
        let aux = spl[rpg];
        spl[rpg] = spl[rng];
        spl[rng] = aux;

        let xng = spl.join('\n');
        document.querySelector('.txt').value = xng;
    },10);

    //apagar intervalo
    stop.addEventListener('click', (stop)=>{
        
        document.body.appendChild(btn);
        clearInterval(interval);
        stop.target.remove();
    });
}

function sustituteBtn(btn){
    btn.remove();
    let stop = document.createElement('button');
        stop.innerHTML='STOP';
    document.body.appendChild(stop);

    return stop;
}

function randomSplValue(spl){
    //Obtener número random con maximo del lng
    var rng = Math.floor(Math.random() * Math.floor(spl.length));
    return parseInt(rng);
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>017</title>
    <script src="js/017.js"></script>
    <link rel="stylesheet" type="text/css" href="css/017.css">
</head>
<body>
<textarea class="txt"></textarea>
<br>
<button class="random">RANDOMIZE</button>
</div>
</body>
</html>

De esta forma, barajeará todas las líneas que haya dentro del textarea. Está todo explicado con los comentarios. (tienes que escribir antes dentro, puedes hacerlo desde el cliente, o en el HTML, pero recuerda que lo que cuenta son saltos de línea, no líneas como tal.)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.