Click here to Skip to main content
16,016,306 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
I'm building a simple store website where I need the euro price converted into bitcoin when the total is shown in the shopping cart. Everything was working until I added the eur-btc API, but now the 'add to cart' and 'show cart' buttons arent working.

Here are my gists for the html and javascript: https://gist.github.com/irishmango/d89dbf003429793fafa7a9afac57506d - html https://gist.github.com/irishmango/cf7cd76306070c2b3d63f83660826f7d - js

What I have tried:

I thought that maybe the error I was due to the use of await outside of the async function. So I tried to wrap my code in an immediately-invoked async function. Still nothing. As far I can see, all IDs match up.

I've tried everything I can think of to fix this problem, but nothing seems to work.

Anyone have any ideas?

Still kinda new to coding so would appreciate any help(and patience) you have
Posted
Comments
Richard Deeming 1-Feb-24 7:25am    
Check your browser's developer console for errors.

If that doesn't help, all modern browsers have a built-in JavaScript debugger. Use that to step through your code to see why its not working.

In the JS file, there are some issues I noticed
line 5:
const showCartButton = document.querySelector('.show-cart');

-- The show-cart class does not exist in the html; instead, try:
const showCartButton = document.querySelector('.show-cart-btn');

line 123:
document.getElementById('show-cart-btn').addEventListener('click', function() {
   console.log('Show Cart button clicked');  // Add this line
   document.getElementById('cart-modal').style.display = 'block';
   updateCartDisplay();
});

-- Similar issue; 'show-cart-btn' is a class, not an id; instead try:
document.querySelector('.show-cart-btn').addEventListener('click', function() {
   console.log('Show Cart button clicked');  // Add this line
   document.getElementById('cart-modal').style.display = 'block';
   updateCartDisplay();
});

line 4,5 (different topic):
const cartButtons = document.querySelectorAll('.add-to-cart-btn');
const showCartButton = document.querySelector('.show-cart');

-- These variables aren't being used, and don't have to declared / initialized; line 3 is being referenced however. I would delete these lines.

In general,
double check your code to make sure everything matches spelling-wise.

If the code ran before you implemented the new API, then I think the issue probably involves names shadowing each-other.
Within the 2 files that are visible to me, which you provided, I can't see how the external code interacts with yours -- so, all I can do is guess. It is pretty common in JS to have an import statement, where the variable names might conflict with one's code.
Switching IDE's might offer new troubleshooting tools (if you have a second one you use), or renaming everything to something unique. Honestly, I'm not sure this is the issue.

There are probably other reasons your code would stop working after implementing outside code:
there might be some downloading of dependencies you might have to do ahead of time; look at any downloading requirements for the API.

Hopefully the notes I left prior help out; I know this question is a few days old. I wish I could give you a definitive answer, but this is the best I've got (until ~I learn more).

- Cheers
 
Share this answer
 
Comments
Andre Oosthuizen 17-Mar-24 6:34am    
Hi Tyler, a lot of effort from your side but you need to notice the posting dates, this is a few months old. I will mark it +5 though for the sheer effort you've put into answering.
make sure that the event listener for the add to cart and show cart is added correctly and the id in the JavaScript code match the id of button in the HTML.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900