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.