Question 44959 in Html Question posted in
Some basic documentation can be found here.

How to make a mobile menu icon (hamburger) while working in JavaScript HTMLElement?

The Question might be confusing and I am sorry, I am trying to make a menu icon for my moble web page. I found a tutorial to create a header and footer by using java script so I am using this to make a responsive webpage to check if a user is on moblie or desktop, and to save space.

this would be the moblie layout, and where I am having issues

if(screen.width <= 883){
    class MyHeader extends HTMLElement {
        connectedCallback() {
            this.innerHTML =
            `
            <header class="header">
                <a href="#default" class="logo">  <img src="logo.png" alt="home" width="100%"> </a>
            <div class="topnav">
                <div id="myLinks">
                    <a href="#">1page</a>
                    <a href="#">2page</a>
                    <a href="#">3page</a>
                    <a href="#">4page</a>
                    <a href="#">5page</a>
                </div>
              <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                  <i class="fa fa-bars"></i>
                    </a>
                 </div>
                <script>
                function myFunction() {
                var x = document.getElementById("myLinks");
                if (x.style.display === "block") {
                    x.style.display = "none";
                } else {
                    x.style.display = "block";
                }
                }
                </script>
            </div>
            </header>
            `
        }
    }
    customElements.define('my-header', MyHeader)

trying to follow this tutorial for the menu button but I am not sure why its not working while I am in java script. if I copy the code excatly in just an HTML file it works fine, but while in a js file I dont get the same result.
The css is the same as the w3schools so I dont know if I should post as well.

Tags:

2

Answers


  1. 0

    You are using a closing tag for the <script> element (</script>) in your template.

    Your HTML will only parse until then, so the script after that closing tag will be HTML content, displayed in your browser. Since the incomplete script is naturally invalid, it throws an error.

    You need to somehow escape writing </script> directly. For example you can write it in parts, e.g. `</${"script"}>` with template literals:

    class MyHeader extends HTMLElement {
    connectedCallback() {
        this.innerHTML =
        `
        <header class="header">
            <a href="#default" class="logo">  <img src="logo.png" alt="home" width="100%"> </a>
        <div class="topnav">
            <div id="myLinks">
                <a href="#">1page</a>
                <a href="#">2page</a>
                <a href="#">3page</a>
                <a href="#">4page</a>
                <a href="#">5page</a>
            </div>
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
                </a>
             </div>
            <script>
            function myFunction() {
            var x = document.getElementById("myLinks");
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
            }
            </${"script"}>
        </div>
        </header>
        `
    }
};
customElements.define('my-header', MyHeader);

const header = document.createElement("my-header");
document.body.append(header);

    Avoid misusing <a> elements as buttons; use <button> elements instead! If you want buttons visually similar to links, then style them as such.

    Also avoid inline event handlers; prefer addEventListener() instead.

    Generally, if you want a custom element to be composed of other elements, you should add those to its shadow DOM because they "are part of its implementation. Without the protection of a shadow root, outside JavaScript may inadvertently interfere with these children".

    Login or Signup to reply.
  2. 0

    i don’t fully understand your prob… but i suppose you can use difer property of script tag
    here is a example for defer attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search