Error finding an specific ID | JavaScript Mastery - Programming & Coding Community | Page 1

snow ingot Jul 6, 2024, 9:00 AM

#

i tried to connect this to mssql

if i try
http://localhost:3000/api/cliente/8123123

i got everything
{"id_cliente":"8123123","apellidoCliente":"Lopez","nombreCliente":"Daniel","SexoCliente":"M","TelefonoCliente":"987654321","CorreoCliente":"[email protected]"}

but in the buttom when i press it, it doesnt do something and send this to the development inspect

modificar.html:83 Error finding the client: Error: Not Found
    at HTMLButtonElement.<anonymous> (modificar.html:74:41)```


i dont understand

#

the id actually exist

if you need an spefic folder or file let me know

#

this is how my enviroment looks

#

app.js

const express = require('express');
const app = express();
const clienteRoutes = require('./routes/cliente');

app.use(express.json());
app.use('/api/cliente', clienteRoutes);

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Servidor escuchando en el puerto ${port}`);
});

wild lance Jul 6, 2024, 9:38 AM

#

so we'd need the code around the button, as it throws from there

#

maybe just add a console.log("clicked") inside the listener callback

snow ingot Jul 6, 2024, 12:27 PM

#

wild lance so we'd need the code around the button, as it throws from there

here

#

           <div class="submain-box">
                <div class="cliente_id">
                    <p class="cliente_id">CLIENTE @ID</p>
                </div>
                <div class="buscar_id">
                    <input type="text" placeholder="Ingrese ID">
                    <button type="button">Buscar</button>
                </div>
                <form class="form-cliente" action="">
                    <div class="campo">
                        <label for="id">ID:</label>
                        <input type="text" id="id" name="id" placeholder="Ingrese ID">
                    </div>
                    <div class="campo">
                        <label for="nombre">NOMBRE:</label>
                        <input type="text" id="nombre" name="nombre" placeholder="Ingrese Nombre">
                    </div>
                    <div class="campo">
                        <label for="apellido">APELLIDO:</label>
                        <input type="text" id="apellido" name="apellido" placeholder="Ingrese Apellido">
                    </div>
                    <div class="campo">
                        <label for="sexo">SEXO:</label>
                        <input type="text" id="sexo" name="sexo" placeholder="Ingrese Sexo">
                    </div>
                    <div class="campo">
                        <label for="telefono">TELÉFONO:</label>
                        <input type="text" id="telefono" name="telefono" placeholder="Ingrese Teléfono"></div>
<div class="campo">
                        <label for="correo">CORREO:</label>
                        <input type="email" id="correo" name="correo" placeholder="Ingrese Correo">
</div>
                    <div class="acciones">
                        <button type="button" class="eliminar-btn">Eliminar</button>
                        <button type="button" class="guardar-btn">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
  </div>```

#

  <script>
        document.querySelector('.buscar_id button').addEventListener('click', async () => {
            const id = document.querySelector('.buscar_id input').value;
            try {
                const response = await fetch(`/api/cliente/${id}`);
                if (!response.ok) throw new Error('Cliente no encontrado');
                const data = await response.json();
                document.querySelector('#id').value = data.id_cliente || '';
                document.querySelector('#nombre').value = data.nombreCliente || '';
                document.querySelector('#apellido').value = data.apellidoCliente || '';
                document.querySelector('#sexo').value = data.SexoCliente || '';
                document.querySelector('#telefono').value = data.TelefonoCliente || '';
                document.querySelector('#correo').value = data.CorreoCliente || '';
            } catch (error) {
                console.error('Error al buscar el cliente:', error);
            }
        });
    </script>```

wild lance Jul 6, 2024, 12:31 PM

#

querySelector('tagName.className')

#

you did

querySelector('.classname tagName')

#

... although I think your's should also get the button.
Dit you test the button function beside the other code, just adding a console.log in the eventListener callback?

#

another issue might be that your script runs before the DOM is fully loaded (?)
you could try wrapping your JS in a

 document.addEventListener('DOMContentLoaded', () =>{
      // your js code
})

snow ingot Jul 6, 2024, 12:44 PM

#

wild lance another issue might be that your script runs before the DOM is fully loaded (?) ...

i will try and i will let you know ❤️

wild lance Jul 6, 2024, 12:46 PM

#

That's why I'd asked you to log inside the button to see whether it works at all)

snow ingot Jul 6, 2024, 1:03 PM

#

wild lance That's why I'd asked you to log inside the button to see whether it works at all...

if i change

            document.querySelector('.buscar_id button').addEventListener('click', async () => {

to

            document.querySelector('button.buscar_id').addEventListener('click', async () => {

i got an error :/

#

at least i added the error message now

wild lance Jul 6, 2024, 1:07 PM

#

so keep it but just instead of the async run a console.log in the listener or console.log(document.querySelector('.buscar_id button'))
to see whether the butto is available

snow ingot Jul 6, 2024, 1:08 PM

#

wild lance so keep it but just instead of the async run a console.log in the listener or `c...

so you say the error its in the js part

#

   <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelector('.buscar_id button').addEventListener('click', async () => {
                const id = document.querySelector('.buscar_id input').value.trim();
                try {
                    const response = await fetch(`/api/cliente/${id}`);
                    if (!response.ok) throw new Error('Cliente no encontrado');
                    const data = await response.json();
                    document.querySelector('#id').value = data.id_cliente || '';
                    document.querySelector('#nombre').value = data.nombreCliente || '';
                    document.querySelector('#apellido').value = data.apellidoCliente || '';
                    document.querySelector('#sexo').value = data.SexoCliente || '';
                    document.querySelector('#telefono').value = data.TelefonoCliente || '';
                    document.querySelector('#correo').value = data.CorreoCliente || '';
                } catch (error) {
                    console.error('Error al buscar el cliente:', error);
                    alert('Cliente no encontrado o error al buscar. Verifica el ID e intenta nuevamente.');
                }
            });
        });
    </script>```

#

i already did the buttom but

#Error finding an specific ID