Hey, Miguel!
I,ve had this problem before. Try using b.style.visibility!='visible'
instead of b.style.visibility=='hidden'
as the condition in your last function like this:
cart.addEventListener('click', function hola(){
b.style.visibility!='visible'? b.style.visibility='visible': b.style.visibility='hidden';
});
I'm not sure why (beginner here), but I have noticed that JavaScript does not recognize property values previously added in CSS, only the ones added in JavaScript. So basically, after loading the page with the previous code, b.style.visibility=='hidden'
returns false
, and when you click for the first time, b.style.visibility='hidden'
is run. Now that JavaScript added the hidden
value, b.style.visibility=='hidden'
returns true
when clicking a second time and b.style.visibility='visible'
is run. The new code solves this since b.style.visibility!='visible'
returns true
after loading the page.
Hope this helps!