JavaScript not working on embedded object in HTML

Question

I have my index.html file, with an embedded object - which is another HTML file, called list.html. I made a JavaScript function, to display 4 random strings, that would create list elements and inject them into the ul in list.html, like so:

The object in index.html:

<section class="second-part">
        <object id="test" type="text/html" data="list.html"></object>
</section>

Inside the body of list.html:

<section class="list-1">
        <ul class="password-1"></ul>
        <p>Hello</p>
    </section>
    
    <script src="list.js"></script>

My javascript:

let possibleChars = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "!", "@", "#", "$", "%", "&", "<", ">", "-"];

let password1 = document.getElementById("test").contentDocument.querySelector(".list-1");
let list1 = password1.querySelector(".password-1");

function generatePassword() {
    list1.innerHTML = ""; // resets previous passwords
    for (let b = 0; b < 4; b++) { // create 4 passwords
        let passwordToPut = ""; // resets the password
        for (let a = 0; a < 8; a++) { // defines password length (8) {
            let i = Math.floor(Math.random() * possibleChars.length); //randomizes the index of possibleChars array
            passwordToPut += possibleChars[i]; // build the password thing that will be assigned to password
        } 
        let listElement = document.createElement("li"); // create an empty list element
        listElement.appendChild(document.createTextNode(passwordToPut)); // for this list element, create a text node with password to put
        list1.appendChild(listElement); // add a list element to the ul with the class "password"
    }

}

The p element that says "hello" in list.html shows up, it's just that the ul and li elements do not. what shows up

What exactly am I doing wrong? Am I embedding list.html properly?

Answer 1

The JavaScript you wrote for the embedded object remains locally scoped to that object.

So when you access the ul element with class password-1 from the list.js file sourced in list.html, the document you are referring to when you call

let password1 = document.getElementById("test").contentDocument.querySelector(".list-1");

is the list.html file. This means that your list.js file has no knowledge of the element with Id test.

So to fix this error, you need to change how you access the elements. I edited some element names for a clearer understanding.

<!-- index.html -->
<section class="second-part">
    <object type="text/html" data="list.html" alt="password generator"></object>
</section>

<!-- list.html -->
<section>
    <button onclick="generatePassword()">Generate Passwords From within embedded HTML</button>
    <ul id="passwords">
        <li>pas1</li>
    </ul>
</section>

<script src="list.js"></script>

<!-- list.js -->
var possibleChars = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "!", "@", "#", "$", "%", "&", "<", ">", "-"];

var passwordsUl = document.getElementById("passwords");

function generatePassword() {
    passwordsUl.innerHTML = ""; // resets previous passwords
    for (let b = 0; b < 4; b++) { // create 4 passwords
        let passwordToPut = ""; // resets the password
        for (let a = 0; a < 8; a++) { // defines password length (8) {
            let i = Math.floor(Math.random() * possibleChars.length); //randomizes the index of possibleChars array
            passwordToPut += possibleChars[i]; // build the password thing that will be assigned to password
        } 
        let passwordLi = document.createElement("li"); // create an empty list element
        passwordLi.appendChild(document.createTextNode(passwordToPut)); // for this list element, create a text node with password to put
        passwordsUl.appendChild(passwordLi); // add a list element to the ul with the class "password"
    }

}