2
respuestas

Por qué mi Select no toma el dato que le paso desde JS

Referente al curso JS en la Web: CRUD con JavaScript asíncrono, en el capítulo Async/Await y actividad Proyecto del aula anterior

por Estudiante
| 89.5k xp | 36 posts

Hola necesito ayuda con algo que en un principio sentia que era sencillo pero vi que me está dando problemas y es que mi Select no toma el dato que le envío desde JS mediante un QuerySelector, ya verifiqúe que lso datos del db.jsons vinieran correctos por lo que no es un error de conexion incluso verifiqúe mediante un console.log(articulo.categoria) y si viene el dato correspondiente, es a la hora de pasar el valor al select 

<form class="agregar__formulario">
                    <div class=" agregar__contenedor">
                        <input name="agregar__file" id="agregar__file" class="agregar__input input" type="text"
                            placeholder="URL de la imagen" required>
                        <label class="agregar__etiqueta" for="agregar__file">URL de la imagen</label>
                    </div>

                    <div class="seleccion">
                            <select name="select" id="categoria" class="categoria" required>
                            <option value="0">Seleccione una categoría</option>    
                            <option value="mujer">Mujer</option>
                            <option value="hombre">Hombre</option>
                            <option value="nina">Niña</option>
                            <option value="nino">Niño</option>
                            <option value="belleza">Belleza</option>
                        </select>
                    </div>

                    <div class="agregar__contenedor">
                        <input name="agregar__nombre" id="agregar__nombre" class="agregar__input input" type="text"
                            placeholder="Nombre del producto" required>
                        <label class="agregar__etiqueta" for="agregar__nombre">Nombre del producto</label>
                    </div>

                    <div class="agregar__contenedor">
                        <input name="agregar__precio" id="agregar__precio" class="agregar__input input" type="text"
                            placeholder="Precio del producto" required>
                        <label class="agregar__etiqueta" for="agregar__precio">Precio del producto</label>
                    </div>

                    <div class="agregar__contenedor">
                        <textarea name="agregar__textarea" id="agregar__textarea" class="agregar__input input" cols="30"
                            placeholder="Descripción del producto" rows="10" required></textarea>
                        <label class="agregar__etiqueta" for="agregar__textarea">Descripción del producto</label>
                    </div>

                    <div id="agregar__contenedor" class="agregar__contenedor">
                        <button class="agregar__boton" id="agregar__boton">
                            Agregar producto
                        </button>
                    </div>
                    <div id="mostrar__mensaje" class="mostrar__mensaje" style="display: none;"  >
                        <p class="mensaje__error">*Ningún campo puede quedar vacío, por favor verifique que haya rellenado cada campo correctamente.*</p>
                    </div>
                </form>

Y le envío los datos desde el JS pero en el select no captura ese dato enviado, ya verifiqué que el dato enviado corresponda a los que tienen en los options por lo que no se que pasa.

2 respuestas
por Estudiante
| 89.5k xp | 36 posts

Mi Javascript

import { productosServicios } from "../servicios/productos-servicios.js";

const link = document.querySelector("#agregar__file");
const categoria = document.querySelector("#categoria");
const nombre = document.querySelector("#agregar__nombre");
const precio = document.querySelector("#agregar__precio");
const descripcion = document.querySelector("#agregar__textarea");

categoria,addEventListener("change", ()=>{
    alert("Se ha cambiado el select")
})
const capturarId  = async() =>{
    const url = new URL(window.location);
    const id = url.searchParams.get("id");
    if( id == null){
        alert("Error al intentar capturar el ID del producto")
        // window.location.href=("./articulos.html")
    }
    let cat =""
    try{
        const articulo = await productosServicios.ConsultaProducto(id)
        if(articulo.imagenURL && articulo.categoria && articulo.nombre && articulo.precio && articulo.descripcion){
            link.value = articulo.imagenURL;
            categoria.value = articulo.categoria;
            nombre.value = articulo.nombre;
            precio.value = articulo.precio;
            descripcion.value = articulo.descripcion;

            if(categoria.value == ""){
                alert("El campo categoria esta vacio")
            }

        }else{
            throw new Error(console.log("Surgio un problema al validar todos los campos del json"));  
        }
        

    } catch(error) {
        // window.location.href ="/screens/error.html"
    }
}

capturarId()
por Nathalia Cardozo
| 1216.6k xp | 5042 posts
Alura Scuba Team Scuba Team

Hola, Estudiante! Cómo estás?

Analicé su código y noté un pequeño error tipográfico justo al comienzo de su código JavaScript.

En la parte donde agregas el evento de escucha, en lugar de un punto (.), que sirve para acceder a una propiedad o función de una variable, escribiste una coma (,). Entre categorias y addEventListener. Debería ser como sigue.

categoria.addEventListener("change", ()=>{
    alert("Se ha cambiado el select")
})

Intenta corregir este error y, si no funciona, vuelve a ponerte en contacto.

¡Espero haber ayudado!

¡Hasta la próxima!