1

estoy intentando usar un onclick para guardar unos productos a una sección de favoritos pero llevo horas leyendo e intentando de todo y no consigo solucionarlo, a continuación les dejo el error que me arroja la consola al darle clic al botón de favoritos.

ERROR:

Uncaught ReferenceError: add_to_favorites is not defined at HTMLAnchorElement.onclick

Código:

    function load_products(section){
            page_section = section;
            let url = base + '/load/products/'+page_section+'?page='+page;
            http.open('GET', url, true);
            http.setRequestHeader('X-CSRF-TOKEN', csrfToken);
            http.send();
            http.onreadystatechange = function (){
                if (this.readyState === 4 && this.status === 200){
                    page = page + 1;
                    let data = this.responseText;
                    data = JSON.parse(data);
                    if (data.data.length === 0){
                        load_more_products.style.display = "none"
                    }
                    data.data.forEach(function (product, index){
                        let div = "";
                        div += "<div class=\"product\">";
                        div += "<div class=\"image\">"
                        div += "<div class=\"overlay\">";
                        div += "<div class=\"btns\">";
                        div += "<a href=\""+base+"/product/"+product.id+"/"+product.slug+"\"><img src=\"img/mostrar.svg\" alt='imagen' width=\'20\' height=\'20\'></a>";
                        div += "<a href=\"\"><img src=\"img/carrito-de-compras.svg\" alt='imagen' width=\'20\' height=\'20\'></a>";
                        div += "<a href=\"javascript:void(0)\" onclick=\"add_to_favorites('"+product.id+"', '1');\"><img src=\"img/lista-de-deseos.svg\" alt='imagen' width=\'20\' height=\'20\'></a>";
                        div += "</div>";
                        div += "</div>";
                        div += "<img src=\""+base+"/uploads/products/"+product.file_path+"/t_"+product.image+"\" alt='imagen de producto'>";
                        div += "</div>";
                        div += "<a href=\""+base+"/product/"+product.id+"/"+product.slug+"\">";
                        div += "<div class=\"title\">"+product.name+"<div>";
                        div += "<div class=\"price\">"+currency+""+product.price+"<div>";
                        div += "<div class=\"options\"><div>";
                        div += "</a>"
                        div += "</div>";
                        products_list.innerHTML += div;
                    });
                 }else{
                    //mensaje de error
                }
            }
        }
    
    
function add_to_favorites(object, module){
          url = base + '/favorites/add/'+object+'/'+module;
          http.open('POST', url, true);
          http.setRequestHeader('X-CSRF-TOKEN', csrfToken);
          http.send();
          http.onreadystatechange = function ()
          {
           if (this.readyState === 4 && this.status === 200)
           {
              let data = this.responseText;
              data = JSON.parse(data);
              console.log(data);
          }
      }
    }

No entiendo porque no me reconoce la función, la probé y esta bien, no entiendo el motivo del error, agradecido quien pueda darme alguna sugerencia de como solucionar este problema.

11
  • Las funciones bindeadas al DOM deben estar en un contexto global. En tu caso, add_to_favorites no está en ese contexto global, sinó en el contexto de load_products.
    – VRoxa
    Commented el 17 ene. 2021 a las 17:19
  • Desde el load la llamo mediante un onclick, mas no esta en el mismo bloque.
    – Niklaus
    Commented el 17 ene. 2021 a las 17:25
  • Debes fijarte des de dónde se invocará add_to_favorites. Aunque estés definiendo ese onclick en la función load_products, no está invocando la función add_to_favorites. La invocación se dará después y des de otro contexto (el contexto de global).
    – VRoxa
    Commented el 17 ene. 2021 a las 17:27
  • No entiendo tu comentario, podrías dejarme alguna documentación para leerla y entender tus palabras y gracias por responder. :D
    – Niklaus
    Commented el 17 ene. 2021 a las 17:55
  • JS no encuentra la función add_to_favorites, revisa que el archivo JS donde está declarada esta función, se esta llamando (<script src="archivo.js"> tag) en el archivo html donde creas los elementos dinámicos. Imagino que tienes ambas funciones en el mismo archivo JS.
    – g.4
    Commented el 17 ene. 2021 a las 19:58

2 respuestas 2

1

Buenas, Niklaus.

Para que puedas entender mejor los conceptos de "scope", puedes leerlos en la documentación Scope (MDN Web Docs).

Adicionalmente, como te comentaron los compañeros, el motivo por el cuál no puedes invocar la función add_to_favorites, se debe a que éste se encuentra inalcanzable para el elemento HTMLAnchorElement que estás creando. Si te fijas, la función está dentro de tu otra función, de esta forma, estás declarando la función en el contexto local (local scope), y por lo tanto, es inaccesible desde afuera.

Para aclararlo un poco más, he creado un pequeño código basado en el tuyo:

<script>
    // Contexto Global

    function load_products() {
        // Contexto Local

        let div = "";
        div += "<a href=\"javascript:void(0)\" onclick=\"add_to_favorites('0', '1');\">Stackoverflow</a>";
        document.getElementById("product_list").innerHTML = div;

        function add_to_favorites(object, module) {
            console.log("Agregado a favoritos!");
        }
    }

    load_products();
</script>

Al ejecutarlo, muestra el problema que tienes:

Ejemplo 1

Para solucionar esto, simplemente pasa la función add_to_favorites al contexto donde pueda ser 'alcanzable' por el elemento creado (en este caso, sería el contexto global):

<script>
    // Contexto Global

    function load_products() {
        // Contexto Local

        let div = "";
        div += "<a href=\"javascript:void(0)\" onclick=\"add_to_favorites('0', '1');\">Stackoverflow</a>";
        document.getElementById("product_list").innerHTML = div;
    }

    function add_to_favorites(object, module) {
        console.log("Agregado a favoritos!");
    }

    load_products();
</script>

Ejemplo 2

6
  • Aunque esta respuesta describe el problema, en el ejemplo de @Niklaus ambas funciones load_products y add_to_favorites, tienen su propio scope.
    – g.4
    Commented el 18 ene. 2021 a las 4:57
  • Exacto, es lo que trato de decir pero parece que nadie me entiende, y como no soluciona mi problema, no puedo aceptar esta respuesta. Son dos funciones separadas correctamente.
    – Niklaus
    Commented el 19 ene. 2021 a las 21:57
  • ¿A qué te refieres con 'separadas correctamente'? En el código que pusiste, una función está dentro de la otra, en ese caso el elemento <a> que estás creando en load_products, no encontrará la función add_to_favorites (porque está dentro de la otra, es decir, en el scope local de la función load_products). Commented el 21 ene. 2021 a las 3:47
  • Amigo si mete el codigo en un ide, se dara cuenta que esta separadas correctamente, :S
    – Niklaus
    Commented el 24 ene. 2021 a las 19:46
  • Por eso te pregunto, porque justamente lo hice pegando el código que brindaste en tu pregunta (a excepción que recorté el código, pero lo demás está igual) Commented el 25 ene. 2021 a las 0:08
1

Dejo la solución, mi amigo Joaquin de MX me ayudo a resolverla. Hicimos un querySelect el cual llamamos mediante una clase, luego accedimos al atributos y así logramos resolverlo, espero le sirva a alguien más :D

function load_products(section) {
    page_section = section;
    let url = base + '/load/products/' + page_section + '?page=' + page;
    http.open('GET', url, true);
    http.setRequestHeader('X-CSRF-TOKEN', csrfToken);
    http.send();
    http.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            page = page + 1;
            let data = this.responseText;
            data = JSON.parse(data);
            if (data.data.length === 0) {
                load_more_products.style.display = "none"
            }
            data.data.forEach(function (product, index) {
                let div = "";
                div += "<div class=\"product\">";
                div += "<div class=\"image\">"
                div += "<div class=\"overlay\">";
                div += "<div class=\"btns\">";
                div += "<a href=\"" + base + "/product/" + product.id + "/" + product.slug + "\"><img src=\"img/mostrar.svg\" alt='imagen' width=\'20\' height=\'20\'></a>";
                div += "<a href=\"\"><img src=\"img/carrito-de-compras.svg\" alt='imagen' width=\'20\' height=\'20\'></a>";
                div += "<a class=\"js-item\" href=\"#\"  data-product-id=\'"+product.id+"\'><img src=\"img/lista-de-deseos.svg\" alt='imagen' width=\'20\' height=\'20\'></a>";
                div += "</div>";
                div += "</div>";
                div += "<img src=\"" + base + "/uploads/products/" + product.file_path + "/t_" + product.image + "\" alt='imagen de producto'>";
                div += "</div>";
                div += "<a href=\"" + base + "/product/" + product.id + "/" + product.slug + "\">";
                div += "<div class=\"title\">" + product.name + "<div>";
                div += "<div class=\"price\">" + currency + "" + product.price + "<div>";
                div += "<div class=\"options\"><div>";
                div += "</a>"
                div += "</div>";
                products_list.innerHTML += div;
            });
            $item = document.querySelectorAll(".js-item");
            $item.forEach(function(Item) {
              Item.addEventListener('click', function(event) {
                event.preventDefault();
                let product = parseInt(Item.getAttribute('data-product-id'));
                add_to_favorites(product,1);
                
                });
            });
        }else{
            //mensaje de error
        }

    }
}


function add_to_favorites(object, module) {
    let url = base + '/favorites/add/' + object + '/' + module;
    http.open('POST', url, true);
    http.setRequestHeader('X-CSRF-TOKEN', csrfToken);
    http.send();
    http.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            let data = this.responseText;
            data = JSON.parse(data);
            console.log(data);
        }
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.