Simple javascript function undefined error

Question

Simply put, I keep getting a Uncaught ReferenceError stating openSideBar is not defined. I cannot figure out why.

<head>
 <script>
   document.getElementById('openSideBarButton').addEventListener ("click", openSideBar);

   function openSideBar() {
      document.getElementById('sideBar').style.width "100%";
   }

   function closeSideBar() {
      document.getElementById('sideBar').style.width "0%";
   }

  </script>
</head>

Use equal signs for assignment `document.getElementById('sideBar').style.width = "100%";` — Andy Ray, Oct 29 '16 at 20:01
I hate myself. It was this. Then followed by a null statement because my php included the script before the actual element. so fixed that too. Time to figure out how to get back the half hour i wasted trying to figure it out lol. — scott fuller, Oct 29 '16 at 20:06
Possible duplicate of [javascript code not work in HEAD tag](https://stackoverflow.com/questions/15675745/javascript-code-not-work-in-head-tag) — Maximillian Laumeister, Sep 27 '18 at 21:12

score 0 · Answer 1 · answered Oct 29 '16 at 20:02

Your script is in the <head> section of the page and attempts to document.getElementById('openSideBarButton'), but that element doesn't exist that early in the page.

Move your script somewhere on the page after the button so that the button exists before your script runs.

Side note: You are also missing equals signs in each of your functions.

Working version:

 <script>
   document.getElementById('openSideBarButton').addEventListener ("click", openSideBar);

   function openSideBar() {
      document.getElementById('sideBar').style.width = "100%";
   }

   function closeSideBar() {
      document.getElementById('sideBar').style.width = "0%";
   }

  </script>
</body>

Notice that it is right before the closing </body> tag instead of in the head section of the page.

Simple javascript function undefined error

1 Answers1