0

Me ha surgido un problema en el cual yo le ingreso datos, en este caso Nombres por el input, y se me añaden a través del botón Añadir. Cuando yo le doy al botón Cambio para cambiar de posiciones a esos nombres, tengo que volver a darle clic al botón Añadir para que se produzca el cambio de posiciones.

let users = [];

function pushData() {
    var inputText = document.getElementById('inputText').value;
    users.push(inputText);
    
    var pval = "";
    for(i=0; i<users.length; i++) {
        pval =pval + users[i]+"<ul></ul>";
    }
    
    document.getElementById('pText').innerHTML = pval;
}

function cambioNombres(array) {
    var j,x,i;

    for (i= array.length -1; i>0; i--) {
        j = Math.floor(Math.random()*(i+1));
        x=array[i];
        array[i]=array[j];
        array[j]=x;
    }
}

cambioNombres(users);
<body>
    <div>
        <input type="text" name="text" id="inputText"> 
        <button onclick="pushData()">Añadir</button>
        <button onclick="cambioNombres(users)">Cambio</button>

        <p id="pText"></p>
    </div>

    <script src="script.js"></script>
    
</body>

No entiendo por que pasa eso y como debería arreglarlo para que solamente cuando le de al botón Cambio ahí se me realice el cambio de posiciones de nombres.

2 respuestas 2

1

Cuando yo le doy al botón Cambio para cambiar de posiciones a esos nombres, tengo que volver a darle clic al botón Añadir para que se produzca el cambio de posiciones.

El problema es que en la función cambioNombres() cambias el orden del contenido del array users, pero este no se ve por pantalla por que nunca se hace un innerHTML o cualquier otra modificación al DOM.

La función pushData() realiza la modificación al DOM, y por eso mismo es que hasta presionar el botón que la llama se ven los cambios. Salo basta con modificar el DOM en cambioNombres().

let users = [];

function pushData() {
    var inputText = document.getElementById('inputText').value;
    users.push(inputText);
    
    var pval = "";
    for(i=0; i<users.length; i++) {
        pval =pval + users[i]+"<ul></ul>";
    }
    
    document.getElementById('pText').innerHTML = pval;
}

function cambioNombres(array) {
    var j,x,i;

    for (i= array.length -1; i>0; i--) {
        j = Math.floor(Math.random()*(i+1));
        x=array[i];
        array[i]=array[j];
        array[j]=x;
    }

    var pval = "";
    for(i=0; i<users.length; i++) {
        pval =pval + users[i]+"<ul></ul>";
    }

    document.getElementById('pText').innerHTML = pval;
}
<body>
    <div>
        <input type="text" name="text" id="inputText"> 
        <button onclick="pushData()">Añadir</button>
        <button onclick="cambioNombres(users)">Cambio</button>

        <p id="pText"></p>
    </div>

    <script src="script.js"></script>
    
</body>

Sin embargo, creo que es más apto definir otra función que se encarge de modificar el DOM con base al array users, esto haría el código más limpio.

const modificarDOM = (arr) => {
    var pval = "";
    for(i = 0;i < arr.length;i++) {
        pval = pval + `${arr[i]}<ul></ul>>`
    }

    document.getElementById('pText').innerHTML = pval;
}

Espero haberte ayudado.

1
  • 1
    Excelente es lo que buscaba, seguiré practicando para mejorar! Muchas gracias
    – Ketzell
    el 10 ago. 2020 a las 2:36
1

El DOM interpreta un elemento que aun no esta listo al momento en que ejecutas cambioNombres(users) en ese momento aun no se reconoce el eleme to users ya que fue cargado antes de que declararas let users = []

Para ello, debes modificar tu función para no recibir el parámetro array y vas actualizando con la variable global users

function cambioNombres() {
    let array = users;
    var j,x,i;
    ....
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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