I have the following HTML component in my Wix Website:
<html>
<body>
<p>Execute a function when a user clicks on a button:</p>
<button id="myBtn">Try it</button>
<p id="demo">
<script>
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
This works without any problem. When I click the button, the paragraph text changes. My problem comes when I want to get an element of the site, oustide of this custom HTML component. For example the following code, prints NULL. When I render the page and I inspect it, I can clearly see that in the HTML DOM, exists a div with the id=‘SITE_CONTAINER’.
<html>
<body>
<p>Execute a function when a user clicks on a button:</p>
<button id="myBtn">Try it</button>
<script>
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction);
function myFunction() {
const gottenElement = document.getElementById("SITE_CONTAINER")
console.log(gottenElement)
}
</script>
</body>
</html>
In the HTML custom element I can only reference and get elements that I defined inside of it. Is there a way to access elements outside of this element, from this element?