TransWikia.com

Uncaught ReferenceError: openNav is not defined at HTMLSpanElement.onclick (index.html:1)

Stack Overflow em Português Asked by Julia on January 17, 2021

Eu tenho um nav side bar, onde o meu onClick (tanto do closeNav, quanto do openNav) não funcionam. Tentei o
document.getElementById("demo").innerHTML = "Hello JavaScript!";,
mas como tenho outros atributos relacionados ao onClick, não sei onde se aplica.

O código é este:

<!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

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP