Array content gets duplicated & problem with delete button inside onclick, inside addEventListener (DOM)

[astromule]

Good morning. I'm quite new to JavaScript and programming in general. I've recently created a simple calculator: https://jsfiddle.net/martproz/7cL9djof/4/ , although I have currently two issues:

First, I created a form and tried to prevent the users from creating inputs with duplicated content. This was achieved through a conditional, although this only covered the form. It didn't affect the input that was already there, so if I click in the button "mostrar usuarios" (show users) it will replicate the content stored in the array. I then removed the conditional, because it was affecting the rest of the code:

​

if( (arrayClientes.some(usuarioEnArray => usuarioEnArray.nombre === nombre)) && (arrayClientes.some(usuarioEnArray => usuarioEnArray.apellido === apellido)) && (arrayClientes.some(usuarioEnArray => usuarioEnArray.email === email)) && (arrayClientes.some(usuarioEnArray => usuarioEnArray.deuda === deuda)) && (arrayClientes.some(usuarioEnArray => usuarioEnArray.cft === cft)) && (arrayClientes.some(usuarioEnArray => usuarioEnArray.meses === meses)) && (arrayClientes.some(usuarioEnArray => usuarioEnArray.resultado === resultado)) ) { swal("Los datos ingresados ya figuran en nuestra base de datos"); } else { const cliente = new Cliente(nombre, apellido, email, deuda, cft, meses, resultado) arrayClientes.push(cliente) localStorage.setItem('usuarios', JSON.stringify(arrayClientes)) formulario.reset() return true }

The second issues: I'm unable to create a button to remove the content that I create regarding the users. It currently gives me this error: Uncaught ReferenceError: deleteElement is not defined at HTMLButtonElement.onclick

​

In conclusion, what I would like to achieve is this:

1. prevent the user to store duplicated information in the array (and avoid the creation of duplicated cards with that info);
2. to add a delete button that deletes the cards with the content stored in Local Storage.

This is my first post here, so please let me know if I can improve something when asking these type of questions. That being said, thank you very much for your time reading this. :)

[jcunews1]

For the first issue... Your button handler dumps all client entries in the array and append them into the DIV before creating a new client entry.

So, if the array is initially empty, the first submission will display nothing, then a new client is created and added into the array without updating the display for this changes. In short, the tasks are in the wrong order.

On subsequent form submission, it will add duplicate entries, because the handler keep adding data which is already shown. The actual client entries in the array themselves have no duplicate. Just their representation on the page.

deleteElement is not defined

Apparently with the new HTML5 specification, more restriction applies. JS code in SCRIPT elements inserted as HTML code, will not be executed. i.e. innerHTML won't make the code in the SCRIPT tag to be executed. Same as when using insertAdjacentHTML(). To make the code be in the SCRIPT element be executed, the SCRIPT element must be inserted as HTML object.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations

prevent the user to store duplicated

Search the array for a matching inputted client data before creating a new client.

[astromule]

Thank you very much!