0

tengo un problema con una practica de Js que estoy haciendo, tengo un array con datos previos. De esta manera al iniciar la pagina, se cargan los datos del array en mi html. Pero el problema viene cuando quiero agregar un nuevo elemento al array. LLamo a una funcion que muestre nuevamente el array pero el problema es que recorre el array nuevo y lo muestra pero deja el anterior. Como puedo evitar esto? entiendo que el problema es que al cargarse la pagina imprime los valores del array y lo otro sucede recien cuando el usuario ya hace click en el boton enviar. pero no se como solucionarlo.

<main id="menu">
<h1>listado</h1>
<form action="">
    
    <input type="text" id="nombres">
    <button type="submit" id="enviar">Enviar</button>
</form>
</main> 

y el script es

var nombres = ['martin', 'agustin'];

const main = document.getElementById('menu');
const entrada = document.getElementById('nombres');
const enviar = document.getElementById('enviar');

enviar.addEventListener('click', addName);

function addName() {

    let valorNombre = entrada.value;
    nombres.push(valorNombre);
    showArray();

}
function showArray() {
    nombres.forEach(element => {
        let createDiv = document.createElement('div');
        createDiv.classList.add('mydiv');
        createDiv.textContent = element;
        main.append(createDiv);
        entrada.value = ' ';
    });
}
showArray()

se que es un error muy de novato pero no lo encuentro. muchas gracias por la ayuda.

1 respuesta 1

0

Puedes borrar los elementos del DOM y luego crearlos de nuevo:

function showArray() {
    // eliminar los elementos anteriores
    document.querySelectorAll('.mydiv').forEach(e => e.remove())
    
    nombres.forEach(element => {
        let createDiv = document.createElement('div');
        createDiv.classList.add('mydiv');
        createDiv.textContent = element;
        main.append(createDiv);
        entrada.value = ' ';
    });
}
1
  • Gracias bro, sabia que era algo tan simple como eso, pero no sabia como realizarlo. Muchas gracias Commented el 3 jul. 2022 a las 16:56

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.