I am trying to apply a 'Click' Event to a div. In this case, I want it to be the one that displays the second button panel, which I have hidden when loading the website. I want it to only display when clicking the menu button. This is my code to which I want to apply the event with JavaScript.
<!--==============================
= BOTONERA =
===============================-->
<div class="container-fluid bg-light">
<div class="container">
<ul class="nav nav-justified py-2 nav-pills">
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold active">Inicio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Matemático</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Gimnasio Bodytech</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Spring Step</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Postobón</a>
</li>
<li class="nav-item" id="menu">
<a href="#" class="nav-link font-weight-bold">
<i class="fas fa-bars"></i>
</a>
</li>
</ul>
</div>
</div>
<!--==============================
= BOTONERA MENU OCULTA =
===============================-->
<div class="container-fluid bg-light" id="menuOculto">
<div class="container">
<ul class="nav nav-justified py-2 nav-pills">
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Bancolombia</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Numeros Pares</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Frutas</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link font-weight-bold">Selección FCF</a>
</li>
</ul>
</div>
</div>
I currently have the following code in my Script.js
When performing the test on my Localhost, I see how well the page loads, in the console it loads me with a repeated error, it continues to repeat itself every time I click on the menu button.
I have consulted about the error but I have not found an answer in Spanish that tells me how to solve it, I understand that it is due to a modification made from version 64 of Google Chrome, but in reality I do not know how to solve it.
The event of showing the button panel works for me, but nevertheless it does it from the second Click, not the first, and in each click that error is repeated in the console.
I appreciate your comments.
Update: This is the natural html code of my page, where I relate how I'm loading the files...
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TALLER EVALUACION | WEB 1 | CESDE</title>
<!-- Website Favicons -->
<link rel="icon" type="image/png" href="vistas/img/icon.png" sizes="16x16">
<link rel="icon" type="image/png" href="vistas/img/icon.png" sizes="32x32">
<link rel="icon" type="image/png" href="vistas/img/icon.png" sizes="64x64">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Fonts Google -->
<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
<!-- CSS Styles -->
<link rel="stylesheet" href="vistas/css/estilos.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Latest FontAwesom version -->
<script src="https://kit.fontawesome.com/29f215aa7a.js" crossorigin="anonymous"></script>
</head>
<body>
Aqui dentro va el código relacionado anteriormente.
<!-- JS Script -->
<script src="vistas/js/script.js"></script>
</body>
</html>
Indeed when reviewing the latest extensions installed in my browser, I remembered that I had installed the Emmet LiveStyle Extension which is supposed to work with SublimeText to see the CSS code live in the browser, I removed it, refreshed the page and the error stopped appearing. error that was throwing me, and indeed my code works without problems.