1

Im having a hard time passing data from one HTML page to another. Im building an online store, i have one page with my items, and with their buttons for users to pick. and i have seconde page that is my checkout page. I want to make it so that when the user clicks on the items in the items page it will get written on the DOM on the checkout page. 2 main issues im having:

1 inside the javascript file i have for both pages, i have the variables and eventListerner for the buttons from the items page, and i also have the variable for the table in the checkout page where i want to write with the DOM. When im on the items page, my table variable comes as null when console.log. And when im on the checkout page i get:

itemsScript.js:44 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at addEventListeners (itemsScript.js:44)
    at Array.map (<anonymous>)
    at itemsScript.js:46

So i see that they are not comunicating properly.

2 where should i put the value and names of the items, on the buttons themself? maybe a data.js file, and the how could i get this data from the button that was clicked?

Samuel Lino
  • 33
  • 7

1 Answers1

2

Is the checkout page a complete new site or implemented inside your product site?

In case of a complete new site you will trigger a new request. One way is using local storage/cache as one already mentioned. This would probably the best solution so you wont lose any items on a normal site reload.

In case of a implemtation direct on the product site have a look at ajax. This might help you.

Rendolph
  • 433
  • 2
  • 9
  • Yes the checkout page is a complete new page. This online store is just for learning/training purpose, ill have to do a bit of research on how to use local storage/cache. – Samuel Lino Feb 22 '21 at 21:59