I am trying to load an inventory page I created inside of another page that I created. I utilize the tag to do this by dynamically calling the link through javascript. However, when I do this, the DOM of the embedded page appears to be empty as the console.log call shows an empty array. When I load the inventory page directly to the browser, the code functions as intended and shows an array of divs.
I have a function in a file called ItemAPI.js for my website below:
function fillInventory() {
const weaponSlots = document.querySelectorAll('.weapon');
console.log(weaponSlots);
//Once loaded do other things.
}
It looks at my HTML page below:
<head>
<script src= 'ItemAPI.js' type = module></script>
</head>
<body>
<div class= 'inventory'>
<div class = 'weapon'></div>
<div class = 'weapon'></div>
<div class = 'weapon'></div>
<div class = 'weapon'></div>
</div>
</body>
When I test the page using LiveServer through VSCode the list of divs with the class of weapons print to the console as the code dictates. However when I load the page from another page shown below:
<head>
<script src= 'AnotherJSFile.js' type = module></script>
</head>
<body>
<embed src="../inventory-screen/inventory-screen.html" borderframe= 0>
</body>
An empty array is logged to the console. My question is how does embed work that the divs are logged correctly when directly loading the html file to the browser and not logged correctly when loaded through the tag?