Javascript - Error: x is not defined

Asked

Viewed 44 times

-1

Good night, you guys,

I’m facing a difficulty that, frankly, I haven’t found a solution to so far.

I created a collapsed sidebar where the javascript file was added before the tag < /body> from the page that loads the sidebar, but javascript appears in the web source when I inspect but Function is not loaded, error appears: toggleSidebar is not defined.

Then I took the same code, went to the codepen.io and worked normally.

My complete code with CSS and JS in CODEPEN: Collapsed Sidebar

**

HTML:

**

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/e943c11967.js" crossorigin="anonymous"></script>

<!-- Main Stylesheets -->
<link href="css/styles.css" rel="stylesheet">

</head>

<body>

<div id="adminSidebar" class="adminSidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
    <a href="#"><span><i class="material-icons">info</i><span class="icon-text">about</span></a><br>
    <a href="#"><i class="material-icons">spa</i><span class="icon-text"></span>services</a></span>
    </a><br>
    <a href="#"><i class="material-icons">monetization_on</i><span
            class="icon-text"></span>clients</span></a><br>
    <a href="#"><i class="material-icons">email</i><span class="icon-text"></span>contact<span></a>
 </div>

 <div id="mainContent">
    <h2>Open/Collapse Sidebar on Hover</h2>
 </div>

 <script src="js/main.js"></script>

</body>

</html>

Note: I already tried to put the js file under the title there on , but it didn’t work either.

Obs.²: I found a post with the same title (Referenceerror: ... is not defined) but the problem is different, so it didn’t help me.

Thanks in advance for the help.

javascript html5 css3

  • "where the javascript file was added before the < /body tag>" no body file added, but head

  • How not? The most suitable place for a JS file is at the end of the body, to be loaded only after the HTML is displayed...

  • ah, after the body ok, I hadn’t noticed the /body, it was easier to have written "after the body" in the question ;) but beware of "The most suitable place for a JS file is at the end of the body", that the most suitable place is not true, scripts that need to be run so that the body is ready shouldn’t stay there, but that’s another thing

  • anyway, tested put the script in the head to see if it changes the behavior?

  • @Ricardopunctual I tried yes, unsuccessfully.

1 answer

0

I ran the code, including through an app on mobile, what is possibly causing error is the path indicated for the Javascript file, have to confirm if the main.js file is inside the js folder.

  • Worse than it is bro, it is within public/js and that was the path specified....

  • When I access the console log on the web and do the sidebar’s Hover it identifies, so I believe the path is correct but then it gives Error toggleSidebar not defined

  • But in the code you published here is in the js/main.js path so I think it’s wrong, when it runs on codepen, it already puts the path of JS and CSS file automatically

Browser other questions tagged javascript html5 css3

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