Please help me to solve this JS problem

Joined
Aug 8, 2023
Messages
2
Reaction score
0
Templating Headers and Footers with Custom HTML Elements - YouTube

Hello everyone, this is my first post here. I am trying to follow the video given above which enables same footer and header in all pages using JS. But I am not able to make it work.
I have tried the step in the video about 'alert(1) and it works but not the code related to <header>. I am posting screenshot of code below, please guide me. I do not understand where I am going wrong. I am eager to learn JS.

Screenshot-from-2023-08-08-15-11-26.png



Screenshot-from-2023-08-08-15-11-40.png
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
Use the </> above to post your code and not a picture that some older people on this site (namely me) can't see.
 
Joined
Jul 4, 2023
Messages
354
Reaction score
41
Little misunderstanding, you tried to use ' (apostrophe) but you should use ` (backtick - placed above key TAB usually) for multiline string.

apostrophe_v_backtick.png


JavaScript:
            class MyHeader extends HTMLElement {
                connectedCallback() {
                    this.innerHTML = `
                        <header>
                            <nav>
                                <ul>
                                    <li>
                                        <a href="index.html">Home</a>
                                    </li>
                                    <li>
                                        <a href="about.html">About</a>
                                    </li>
                                    <li>
                                        <a href="contact.html>Contact</a>
                                    </li>
                                </ul>
                            </nav>
                        </header>
                    `;
                }
            }

            customElements.define('my-header', MyHeader);
 
Joined
Aug 8, 2023
Messages
2
Reaction score
0
Little misunderstanding, you tried to use ' (apostrophe) but you should use ` (backtick - placed above key TAB usually) for multiline string.

View attachment 2590

JavaScript:
            class MyHeader extends HTMLElement {
                connectedCallback() {
                    this.innerHTML = `
                        <header>
                            <nav>
                                <ul>
                                    <li>
                                        <a href="index.html">Home</a>
                                    </li>
                                    <li>
                                        <a href="about.html">About</a>
                                    </li>
                                    <li>
                                        <a href="contact.html>Contact</a>
                                    </li>
                                </ul>
                            </nav>
                        </header>
                    `;
                }
            }

            customElements.define('my-header', MyHeader);

I thank you VBService, VERY MUCH for solving this problem. I have never imagined this could have been a problem, and that is because I have never used that sign. I always use apostrophe to close and start single quote while writing using keyboard.

I was waiting for my post to get approved eagerly. I wish you best of luck for whatever task is in your hand, Sir.
 
Joined
Dec 2, 2022
Messages
5
Reaction score
1
I thank you VBService, VERY MUCH for solving this problem. I have never imagined this could have been a problem, and that is because I have never used that sign. I always use apostrophe to close and start single quote while writing using keyboard.

I was waiting for my post to get approved eagerly. I wish you best of luck for whatever task is in your hand, Sir.
I already answered you a little bit above lol
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,754
Messages
2,569,520
Members
44,996
Latest member
rainocode

Latest Threads

Top