Java Script does not inject HTML correctly

Asked

Viewed 153 times

0

Good afternoon, I am making a website apênas with pure Html5 and Css3 and in it has a menu, however I want that menu stay fixed in all other pages and then not to need to copy and paste the code in all pages I decided to use a little Java Script, however when opening other pages (other than the Index that was the page that the menu was made) the browser does not load and displays an error message.

Below is the picture of the error that is appearing in the browser. imagem do erro que está dando When opening the site on a local server it "Download" the entire menu and does not apply the formatting of the Css that was supposed to occur, not to mention that on other pages the menu does not even appear. menu que está aparecendo "bulgado" Photo from the menu as it was to actually appear

menu original da pagina principal (Index) The code below refers to the menu made in Html

<body>
<div class="container">
    <div class="item1 bg-color-item1">
        <ul class="texto">
            <li>
                <a href="index.html">Home</a>
            </li>

            <li>
                <a href="about.html">About</a>
            </li>

            <li>
                <a href="github.html">Github</a>
            </li>

            <li>
                <a href="#linkedin">Linkedin</a>
            </li>

            <li>
                <a href="contact.html">Contact</a>
            </li>
        </ul>
    </div>

The code below refers to the stylized menu with Css

     ul {
       display: flex;
       box-sizing: border-box;
       text-decoration: none;
       justify-content: space-around;
       padding: 18px 400px;  
   }

    li {
       display: inline-block;
       font-family: 'Oswald';
       padding: 5px 0px;
       }

   .bg-color-item1{
       background-color: rgb(65, 63, 63);
     }

   .item1 {
       position: fixed;
       color: aliceblue;
       border-bottom: solid 5px rgb(67, 139, 233);
       width: 100%;
     }
   a {
       text-decoration: none;
       color: #eee;
       font-size: 20px;
     }

   .item1 a {
        padding: 10px;
     }

   .item1 a:hover {
       box-sizing: border-box;
       background-color: rgb(67, 139, 233); 
       margin: 15px;
       transition: 0.5s; 
      }

Below is the code in Java Script

window.onload = function () {
var template = `
<body>
<div class="container">
    <div class="item1 bg-color-item1">
        <ul class="texto">
            <li>
                <a href="home.html">Home</a>
            </li>

            <li>
                <a href="about.html">About</a>
            </li>

            <li>
                <a href="github.html">Github</a>
            </li>

            <li>
                <a href="#linkedin">Linkedin</a>
            </li>

            <li>
                <a href="">Contact</a>
            </li>
        </ul>
    </div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>

</div>
</body>
 `;

document.getElementById("header").innerHTML = template;
}

Thanks in advance !

Part of html where I call js

<body>

<div id="header"></div>

<div class="container">
    <div class="main">
        <div class="flip-card">
            <div class="flip-card-inner">
                <div class="flip-card-front  giovanni">
                    <img src="img/giovanni.jpg" alt="Giovanni">
                </div>

                <div class="flip-card-back">
                    <h1 class="text-flip-card">Nome: </h1>
                    <h4 class="text-flip-card">Idade: </h4>
                    <h4 class="text-flip-card">Sexo: </h4>
                    <h4 class="text-flip-card">Estado civil: </h4>
                </div>

            </div>
        </div>
    </div>

    <div class="texto sombra-texto">
        <p>

        </p>
    </div>

</div>

<script type="module" src="./header.js"></script>

javascript html5 css3

  • On the screen you are calling the menu you have an element with the ID header? You are calling the header.js inside the <head> or at the end of the document (I mean at the end of the body)?

  • Place the HTML of the page.

  • hi, sorry I forgot to put the html part where I call the js, I just updated the code, Thank you !

  • 1

    There are two points you have to take into consideration by applying this approach. First: you will always have to have in all your pages a div com with id header According to the header.js file you have to be in the same folder as the html file you are opening.

  • @Ricardogomes I did exactly so I put in all the pages and this in the same file I’m opening but it still doesn’t work, you know what can be ?

  • the problem is that you are putting the <body> tab in the template, if it will load on other pages as menu put only reusable code

Show 1 more comment

1 answer

0


I created an index.html page and an index2.html page with no code in the tag, but I only bring the menu.html file. I believe it is a possible solution for you to adapt and use as you wish, remember to put only the reusable code without the Father tag.

"use strict"
const menu =`<style>
ul {
    display: flex;
    box-sizing: border-box;
    text-decoration: none;
    justify-content: space-around;
    padding: 18px 400px;  
}

 li {
    display: inline-block;
    font-family: 'Oswald';
    padding: 5px 0px;
    }

.bg-color-item1{
    background-color: rgb(65, 63, 63);
  }

.item1 {
    position: fixed;
    color: aliceblue;
    border-bottom: solid 5px rgb(67, 139, 233);
    width: 100%;
  }
a {
    text-decoration: none;
    color: #eee;
    font-size: 20px;
  }

.item1 a {
     padding: 10px;
  }

.item1 a:hover {
    box-sizing: border-box;
    background-color: rgb(67, 139, 233); 
    margin: 15px;
    transition: 0.5s; 
   }
</style>
<div class="container">
    <div class="item1 bg-color-item1">
        <ul class="texto">
            <li>
                <a href="index.html">Home</a>
            </li>

            <li>
                <a href="index2.html">About</a>
            </li>

            <li>
                <a href="github.html">Github</a>
            </li>

            <li>
                <a href="#linkedin">Linkedin</a>
            </li>

            <li>
                <a href="">Contact</a>
            </li>
        </ul>
    </div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <a href="index.html">page01</a><br>
    <a href="index2.html">page02</a>
</div>`;
const bod = document.querySelector('body');
bod.innerHTML = menu; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="js/menu.js"></script>
</body>
</html>

  • thank you so much for your help !!!

  • Okay, the community thanks you for your doubt that helped many others, success!

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.