JavaScript - Quien me colabora con este codigo no me guarda en el objeto al hacer push

Quien me colabora con este codigo no me guarda en el objeto al hacer push

Publicado por ISAC (1 intervención) el 03/10/2022 05:35:54

Este html lo llame "clientes"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>El título de mi página</title>
<link rel="stylesheet" href="estilos.css">
<script type="text/javascript" src="crud.js"></script>
</head>

<body>

<header>
<h1>ESTE ES EL SISTEMA ESTOCOLMO</h1>
<nav>
<ul>
<li><a href="index.html">INICIO</a></li>
</ul>
</nav>
</header>
<section>
<form >
<div>
<label>ID :</label>
<input type="text" name="id" id="id">
</div>
<div>
<label>NOMBRE :</label>
<input type="text" name="nombre" id="nombre">
</div>
<div>
<label>TELEFONO :</label>
<input type="text" name="telefono" id="telefono">
</div>
<div>
<label>CIUDAD :</label>
<input type="text" name="ciudad" id="ciudad">
</div>
<div class="botones">
<input type="submit" value="INSERTAR" onclick="insertar()">
<input type="submit" value="BORRAR" onclick="eliminar()">
<input type="submit" value="BUSCAR" onclick="mostrar">
<input type="submit" value="ACTUALIZAR" onclick="editar()">
<br>
<a href="verClientes.html">VER LISTADO</a>
</div>
</div>
</div>
</form>
</form>
</article>
</section>
</body>
</html>

Este es el javascrip crud.js

function ver(){
var lista=document.getElementById('lista');
cliente.forEach(function(data,index){
var linew= document.createElement('li');
var contenido = document.createTextNode(data.id+' '+data.nombre+" "
+data.telefono+" "+data.ciudad);
lista.appendChild(linew);
linew.appendChild(contenido);
})
}

cliente = [{id: '1', nombre:'lucrecia',telefono:'762342', ciudad: 'cali'}]

function insertar(){

var id = document.getElementById('id').value;
var nom = document.getElementById('nombre').value;
var tel = document.getElementById('telefono').value;
var ciu = document.getElementById('ciudad').value;
cliente.push({id: id, nombre: nom, telefono: tel, ciudad: ciu});
alert('REGISTRO CREADO');
}

function eliminar(){
var id = document.getElementById('id').value;
var nom = document.getElementById('nombre');
var tel = document.getElementById('telefono');
var ciu = document.getElementById('ciudad');
for(let x in cliente){
if (id == cliente[x].id){
delete cliente[x].id;
delete cliente[x].nombre;
delete cliente[x].telefono;
delete cliente[x].ciudad;
alert('REGISTRO ELIMINADO');
}
else{
alert('NO SE ENCUENTRA EL ID');
}
}
}

function mostrar(){
var id = document.getElementById('id').value;
var nom = document.getElementById('nombre');
var tel = document.getElementById('telefono');
var ciu = document.getElementById('ciudad');
for(let x in cliente){
if (id == cliente[x].id){
nom.value = cliente[x].nombre;
tel.value = cliente[x].telefono;
ciu.value = cliente[x].ciudad;
break;
}
else{
alert('OJO');
}
}
}

function editar(){

var id = document.getElementById('id').value;
if(id == ''){
alert('REGISTRO NO EXISTE');
}
else{
var nom = document.getElementById('nombre').value;
var tel = document.getElementById('telefono').value;
var ciu = document.getElementById('ciudad').value;
elementIndex = cliente.findIndex(obj => obj.id == id);
cliente[elementIndex].nombre = nom;
cliente[elementIndex].telefono = tel;
cliente[elementIndex].ciudad = ciu;
alert('REGISTRO ACTUALIZADO')

}

finalmente aca veo los datos pero solo sale el objeto que deje por dfecto
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="crud.js"></script>
<link rel="stylesheet" href="estilos.css">
</head>
<body onload="ver()">
</div>
<a href="clientes.html"><input type="button" value="VOLVER"></a>
<div id='lista' style='background-color:white'>

</div>

</body>
</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 45

Val: 40

Quien me colabora con este codigo no me guarda en el objeto al hacer push

Publicado por Marlon (90 intervenciones) el 04/10/2022 07:46:14

Ten en cuenta que no puedes pasar variables, objetos, arreglos etc.. de un documento HTML a otro así como así. A lo que me refiero es que cuando el documento verClientes.html se carga el lee el archivo Crud.js tal y como esta, por esta razón puedes ver el objeto que esta por defecto. Lo que estas haciendo es prácticamente imposible de esa forma.

Hay varias soluciones para esto,
1. Mostrar todo dentro del documento Clientes.html.
2. Usar localStorage ó sessionStorage (esto guarda los datos en el navegador)
3. Hay otra que es usar new URL(location.href), puedes investigar mas sobre esto la verdad no se como funciona.
4 Usar un leguaje del lado del servido (PHP, node JS...etc)

Espero esto te ayude, cualquier cosa , no dudes en preguntar, Saludos!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar