Please help me to solve this JS problem

[softappweber]

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.

 

[Rail_Batyrshin]

Hello. You need to use ` instead of ' in your script because you have the multiline string

 

[BigDady]

Use the </> above to post your code and not a picture that some older people on this site (namely me) can't see.

 

[Brandon Dexter]

Hi, @softappweber . I am a Javascript expert. I can help you to learn it
If you are interesting, please contact me via mail
(e-mail address removed)

 

[VBService]

Little misunderstanding, you tried to use ' (apostrophe) but you should use ` (backtick - placed above key TAB usually) for multiline string.

            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);

 

[softappweber]

Little misunderstanding, you tried to use ' (apostrophe) but you should use ` (backtick - placed above key TAB usually) for multiline string.

View attachment 2590

            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.

 

[Rail_Batyrshin]

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