Help with understanding scope in a project

Hey there,

I have a e-commerce cart page im working on. The page has some generated radio buttons which apear based on a reply from an api…

Once the user is on cart and selects a “freight” it is pushed to the api and saved in thjere cart…

Say the user goes back to the store and carrys on shopping then comes back to the cart page. I want then to call the api and check the freight option then display it as there previous checked option…i have done all this and the logic is working…but …keep reading ! :smiley:

The problem is as the html is generated from an api call, my function which is to check this cannot read the element as it “doesnt exist yet” (i assume)…is there any work around or advice anyone could give me ?..

Any help is very much appreciated

Just to clarify, the cart form is posted to an api and an object is returned from which you create an updated cart . Or this thing makes HTML on the cart page for you.

there is no form sent as i have a call to “check cart” and one to “add to cart”…when the user adds items to the cart it is sent using " add to cart", this is also the case for “freight options” which is another endpoint. “check cart” grabs the info from the freight option call and adds it to itself so a overview of all cart related things are bundled together…

The html is based on when the user enters the cart page an onload function calls “check cart” and displays the html accordingly to the reply and whats in the object!.

so problem being that i create a function which relies on a id which " doesnt exist" as the id is created when the page loads…i hope that makes sense hehe ! :slight_smile:

Mentally I want to start with async and await. But this sounds analogous to jQuery’s $( document ).ready() which was in the head before the dom was created. It included $( window ).on( "load", function(). Once </body> was read we could know that there was supposed to be an <iframe> but it’s contents haven’t arrived yet.

How does javascript know it has a dom but has to wait for a new element to be added before continuing? Does it “await” for something from the server? Or, was the browser cookied on every api call so if there is cookie “x” wait for “y” before proceeding? Or something else? We know we’re in a given state because of what?

Sorry I couldn’t help more. That’s my thought process.