I'm trying to use an onclick to save some products to a favorites section but I've been reading for hours and trying everything and I can't solve it, here's the error that the console gives me when I click the favorites button.
MISTAKE:
Uncaught ReferenceError: add_to_favorites is not defined at HTMLAnchorElement.onclick
Code:
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);
}
}
}
I don't understand why the function doesn't recognize me, I tried it and it's fine, I don't understand the reason for the error, I'd be grateful to anyone who can give me some suggestion on how to solve this problem.
Hi Niklaus.
So that you can better understand the concepts of "scope", you can read them in the Scope documentation (MDN Web Docs) .
Additionally, as your colleagues told you, the reason why you cannot invoke the function
add_to_favorites
is because it is unreachable for the elementHTMLAnchorElement
you are creating. If you notice, the function is inside your other function, in this way, you are declaring the function in the local context (local scope) , and therefore, it is inaccessible from outside.To make it a bit more clear, I've created a little code based on yours:
When you run it, it shows the problem you're having:
To fix this, simply pass the function
add_to_favorites
to the context where it can be 'reachable' by the created element (in this case, it would be the global context ):I leave the solution, my friend Joaquin from MX helped me solve it. We made a querySelect which we call through a class, then we access the attributes and thus we manage to solve it, I hope it helps someone else :D