0

I have this custom element. (Tell me if there is something wrong with this construction as I am new to custom elements)

class Navbar extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
            <nav id='navbar'>
                <i class="fas fa-home" id='home-i'></i>
                <hr class="line">
                <i class="fas fa-arrow-alt-circle-left" id='back-i'></i>
                <i class="fas fa-brain"></i>
                <i class="fas fa-lightbulb" id='quiz-i'></i>
                <i class="fas fa-sign-out-alt" id='exit-i'></i>
            </nav>
        `
    }
}
customElements.define('left-navbar', Navbar)

And I want to access one of the icons to add some button functionality, which involves calling .querySelector.

const homeBtn = document.querySelector('left-navbar').root.querySelector('#home-i');

homeBtn.addEventListener('click', () => {
    window.location.href = 'index.html';
    changePageTitle(0);
})

However, upon run time I get an error stating Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector'). Since document.querySelector('left-navbar').root is null. I am confused as to what I am supposed to put in as the parameter for the first .querySelector.

Also, here is the HTML part.

<body>
        <main>
            <!-- Heading -->
            <h1 id='reading-heading'>Chapter ###</h1>

            <!-- Navigation Bar -->
            <left-navbar></left-navbar>
Void
  • 169
  • 14

0 Answers0