Amigos sou iniciante no JavaScript e preciso de uma ajuda.
Estou fazendo um crud, e quando tento atualizar meu objeto ele está duplicando. Segue meu codigo
document.getElementById(‘formulario’).addEventListener(‘submit’,cadastrarContato);
function verificaJSON(contato){
if(localStorage.getItem(‘contato’) == null){
var contatos = [];
contatos.push(contato);
localStorage.setItem(‘contato’, JSON.stringify(contatos));
}
else{
var contatos = JSON.parse(localStorage.getItem(‘contato’));
contatos.push(contato);
localStorage.setItem(‘contato’, JSON.stringify(contatos));
}
}
function cadastrarContato(e){
var nome = document.querySelector('#campo-nome').value;
var dataNascimento = document.querySelector('#campo-dataNascimento').value;
var email = document.querySelector('#campo-email').value;
var endereco = document.querySelector('#campo-endereco').value;
var celular = document.querySelector('#campo-celular').value;
if(!nome || !dataNascimento){
alert('Campo nome ou campo Data está vazio.');
return false;
}
var contato = {
"nome" : nome,
"data" : dataNascimento,
"email" : email,
"endereco" : endereco,
"celular" : celular
}
verificaJSON(contato);
document.getElementById('formulario').reset();
mostraContatos();
e.preventDefault();
}
function mostraContatos(){
var contatos = JSON.parse(localStorage.getItem('contato'));
var contatoResultado = document.querySelector("#resultados");
contatoResultado.innerHTML='';
for(var i = 0; i < contatos.length; i++){
contatoResultado.innerHTML +='<tr>'+
'<td>'+ contatos[i].nome + '</td>'+
'<td>'+ contatos[i].data + '</td>'+
'<td>'+ contatos[i].email + '</td>'+
'<td>'+ contatos[i].endereco + '</td>'+
'<td>'+ contatos[i].celular + '</td>'+
'<td> <button class="btn-excluir" onclick="excluirContato(\''+contatos[i].nome+'\')"> Excluir </button> </td>'+
'<td> <button class="btn-editar" onclick="atualizarContato(\''+contatos[i].nome+'\')"> Editar </button> </td>'+
'</tr>'
}
}
function excluirContato(nome){
var contatos = JSON.parse(localStorage.getItem('contato'));
for(var i = 0; i < contatos.length; i++){
if(contatos[i].nome == nome){
if(confirm(nome + ' será excluído ?')){
contatos.splice(i, 1);
}
}
localStorage.setItem('contato',JSON.stringify(contatos));
}
mostraContatos();
}
function atualizarContato(nome){
if(confirm('Deseja editar o contado? ')){
var contatos = JSON.parse(localStorage.getItem('contato'));
for(var i =0; i <contatos.length; i++){
if(contatos[i].nome == nome){
var contatoEncontrado = contatos[i];
document.querySelector('#campo-nome').value = contatoEncontrado.nome;
document.querySelector('#campo-dataNascimento').value = contatoEncontrado.data;
document.querySelector('#campo-email').value = contatoEncontrado.email ;
document.querySelector('#campo-endereco').value = contatoEncontrado.endereco;
document.querySelector('#campo-celular').value = contatoEncontrado.celular;
contatos[contatoEncontrado].nome = document.querySelector('#campo-nome').value;
contatos[contatoEncontrado].data = document.querySelector('#campo-dataNascimento').value;
contatos[contatoEncontrado].email = document.querySelector('#campo-email').value;
contatos[contatoEncontrado].endereco = document.querySelector('#campo-endereco').value;
contatos[contatoEncontrado].celular = document.querySelector('#campo-celular').value;
}
}
console.log('Foi Atualizado');
mostraContatos();
}
}
Meu Html
Agenda de ContatosAgenda Contatos
<section>
<h2>Formulário de Contatos</h2>
<form id="formulario">
<fieldset>
<label for="campo-nome">Nome:</label>
<input id="campo-nome" type="text" placeholder="digite o nome do seu Contato">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-dataNascimento">Data:</label>
<input id="campo-dataNascimento" type="text" placeholder="09/05/2010">
</fieldset>
<fieldset class="campo-email">
<label for="campo-email">Bairro:</label>
<input id="campo-email" type="text" placeholder="digite o seu Bairro">
</fieldset>
<fieldset class="campo-endereco">
<label for="campo-endereco">Telefone Fixo:</label>
<input id="campo-endereco" type="text" placeholder="digite o seu telefone residencial">
</fieldset>
<fieldset class="campo-TelefoneCelular">
<label for="campo-celular">Telefone Celular:</label>
<input id="campo-celular" type="text" placeholder="digite o telefone celular">
</fieldset>
<button id="adicionar-contato" type='submit' class="botao bto-principal">Adicionar</button>
</form>
</section>
<h2 id="tblContatos">Tabela de Contatos</h2>
<section>
<h2> </h2>
<table style="border: 1px;">
<thead>
<tr>
<th>Nome</th>
<th>Data de Nascimento</th>
<th>email</th>
<th>Endereco</th>
<th>Telefone</th>
<th>Excluir</th>
<th>Editar</th>
</tr>
</thead>
<tbody id="resultados">
</tbody>
</table>
</section>
</main>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/index.js"></script>
<script>
$('h1').animate({'margin-left': '+=410'}, 5000);
$('#tblContatos').animate({'margin-right': '+=410'}, 5050)
</script>