Uncaught Referenceerror: openNav is not defined at Htmlspanelement.onclick (index.html:1)

Asked

Viewed 50 times

2

I have a Nav side bar, where mine onClick (so much of closeNav, how much of openNav) do not work. I tried the document.getElementById("demo").innerHTML = "Hello JavaScript!";, but as I have other attributes related to onClick, I don’t know where it applies.

The code is this:

<!DOCTYPE html>
<html lang="pt-Br">
  <head>
    <link href="assets/css/style.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body id="">
    <div class="container-fluid">
      <div class="row">
        <nav class="navbar">
          <div id="menu" class="sidenav menu col-md-2">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
              <span class="menu-icon"></span>
              <span class="menu-label">Menu</span>

              <img src="../img/menu.svg" alt="menu" /> Menu</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/inicio.svg" alt="início" /> Início</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/acoes.svg" alt="ações" /> Ações</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/resultados.svg" alt="resultados" /> Resultados</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/ted.svg" alt="entenda o ted" class="ted" />
              Entenda o TED</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/log.svg" alt="voltar ao Sou Log" /> Voltar ao Sou
              Log</a
            >
          </div>
          <span class="openNav" onclick="openNav()">
            <img
              class="dark_menu"
              src="../img/dark_menu.svg"
              alt="menu escuro"
            />
          </span>

          <div id="name_page" class="initiation_page">Início</div>
          <!--<p class="action_page">Ações</p>-->
          <div id="ted_header" class="ted_header">
            <img src="../img/App Name.svg" alt="TED" />
          </div>
          <div id="ted_help_header" class="ted_help_header">
            <img src="../img/Pose_03_TED.svg" alt="TED pensativo" />
            <img
              class="ted_help"
              src="../img/Ajuda.svg"
              alt="'Precisa de ajuda?'"
            />
          </div>
          <div class="user_name">
            <div class="card-body user_card border-left">
              <div class="user_name_complete">
                Adriana
                <div class="user_code">000112</div>
              </div>
              <div class="user_inicial">A</div>
            </div>
          </div>
        </nav>

        <script>
          function openNav() {
            document.getElementById("menu").style.width = "200px";
            document.getElementById("page").style.marginLeft = "200px";
            document.body.style.backgroundColor = "rgba(98, 141, 148, 0.8)";
          }

          function closeNav() {
            document.getElementById("menu").style.width = "0px";
            document.getElementById("page").style.marginLeft = "0px";
            document.body.style.backgroundColor = "rgba(0, 0, 0, 0)";
          }
        </script>
      </div>
    </div>
  </body>
</html>
html

1 answer

0

No Javascript nas functions openNav and closeNav, you already looking for the id with the name page, but this element does not exist, the element with the similar name I found was the name_page.

follows the correction of your code:

<!DOCTYPE html>
<html lang="pt-Br">
  <head>
    <link href="assets/css/style.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body id="">
    <div class="container-fluid">
      <div class="row">
        <nav class="navbar">
          <div id="menu" class="sidenav menu col-md-2">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
              <span class="menu-icon"></span>
              <span class="menu-label">Menu</span>

              <img src="../img/menu.svg" alt="menu" /> Menu</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/inicio.svg" alt="início" /> Início</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/acoes.svg" alt="ações" /> Ações</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/resultados.svg" alt="resultados" /> Resultados</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/ted.svg" alt="entenda o ted" class="ted" />
              Entenda o TED</a
            >
            <a href="#" class="closebtn_menu">
              <img src="../img/log.svg" alt="voltar ao Sou Log" /> Voltar ao Sou
              Log</a
            >
          </div>
          <span class="openNav" onclick="openNav()">
            <img
              class="dark_menu"
              src="../img/dark_menu.svg"
              alt="menu escuro"
            />
          </span>

          <div id="name_page" class="initiation_page">Início</div>
          <!--<p class="action_page">Ações</p>-->
          <div id="ted_header" class="ted_header">
            <img src="../img/App Name.svg" alt="TED" />
          </div>
          <div id="ted_help_header" class="ted_help_header">
            <img src="../img/Pose_03_TED.svg" alt="TED pensativo" />
            <img
              class="ted_help"
              src="../img/Ajuda.svg"
              alt="'Precisa de ajuda?'"
            />
          </div>
          <div class="user_name">
            <div class="card-body user_card border-left">
              <div class="user_name_complete">
                Adriana
                <div class="user_code">000112</div>
              </div>
              <div class="user_inicial">A</div>
            </div>
          </div>
        </nav>

        <script>
          function openNav() {
            document.getElementById("menu").style.width = "200px";
            document.getElementById("name_page").style.marginLeft = "200px";
            document.body.style.backgroundColor = "rgba(98, 141, 148, 0.8)";
          }

          function closeNav() {
            document.getElementById("menu").style.width = "0px";
            document.getElementById("name_page").style.marginLeft = "0px";
            document.body.style.backgroundColor = "rgba(0, 0, 0, 0)";
          }
        </script>
      </div>
    </div>
  </body>
</html>

A hint, you’re searching for an element in your HTML, but it doesn’t exist and yet you’re trying to apply a style (that’s why this error is presented to you), you could validate it, that way:

var name_page = document.getElementById("name_page");
if(name_page != null)
{
   name_page.style.marginLeft = "0px";
}

With this style will only be applied if the element actually exists

Browser other questions tagged html

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