0
575
ViewsJavascript: How to wait until an element exists in DOM
I'm new tp Javascript and I'm trying to code a "simple" e-commerce.
The thing is, I have a cart that appears (slides from the side) whenever a new item is added, and inside of the cart, the item is represented with a container that looks like this:
Everything works perfectly EXCEPT ONE THING.
Since the elements are added to the cart by the user, they do not exist previously inside of it, and my code can't get the buttons before the cart appears, so they end up being "null".
In order for the cart buttons to work I have to reload the page, so that they would already be there (cause I'm using Local Storage and therefore the DOM reloads with the elements already there, and now it can find the buttons)
Is there any way to make my code wait for the elements to be added to the cart and appear in the DOM and only THEN retrieve them?
Since it's a to attach to this post, I leave you with the repository, so you can take a look (the only important things are in the folder "CATALOGO" > products.html // folder "assets/js" > "catalogo.js":
The code is a bit messy, since I've been back and forth patching and retrying a bunch of stuff to achieve that, but with no result.
(The EventListener DOMContentLoaded, also won't work since the dom is loaded, but the elements inside the cart still don't exist)
(I'm NOT looking for a solution such as setTimeOut)
I thought I could use Selenium, but I'd have to use node, and I wanted to do it only with JS.
2 answers
Answer question0
I am on a phone and can't check your code, but based on the details you gave, you need to capture the input bubble (since it's not possible to target a dynamically created button directly)
To do so, put your event handler on an element that already exists without user input, such as an upper div... when the user clicks the button the event will bubble up to that div and you can capture it there.
You said you're new to Javascript, so if you're unfamiliar with the concept Google search for "Javascript event bubbling" and there are plenty of great articles.
EDIT: I created a very basic example of this in action if you want to see, just save this as an HTML file and open in your browser.
<html>
<body>
<div>
<button id="addBtn">Add New Button</button>
</div>
<div id="newBtnContainer"></div>
</body>
</html>
document.getElementById('addBtn').onclick = function() {
var btn = document.createElement('button');
var btnText = document.createTextNode("Dynamically Created Button");
btn.appendChild(btnText);
document.getElementById('newBtnContainer').appendChild(btn);
}
document.getElementById('newBtnContainer').onclick = function() {
alert('Found the button!');
}
Hope this helps your use case Thanks
0
Why not just try to get those buttons once something is added in the cart?