Having Errors with reading cookies via javascript

Question

I am storing a cookie when the user accepts cookies on the page.... Once they do this it will in turn stop one from seeing a popup when they visit.

Although when i call the read cookie script in body onload it does nothing.

The cookie is set as I can see it in my chrome content settings.

the way i am trying to do this is calling one function in an external .js called cookieornot() that calls another function and stores the return as a variable

My cookieornot() code is:

  function cookieornot(){
    var result = readCookie("acceptcookies");
    if (result) {
      document.getElementById('acceptcookies').style.display = 'none';
    } else {
      document.getElementById('acceptcookies').style.display = 'block';
    }
  }

My readcookie() code is

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

In my HTML File i have the external .js file holding both functions references as

<script src="assets/js/ordersys.js"></script>

My HTML portion is: (DIV ID="acceptCookies" should be hidden if the cookie is set)

<body onload='cookieornot()'> <a href="#" class="scrollToTop w3-btn fa fa-chevron-circle-up fa-2x">
    </a>
    <!-- Modal -->
    <nav class="w3-sidenav w3-white w3-card-8 w3-animate-left w3-center" style="display:none;z-index:4;width:70px"

      id="mySidenav"> </nav>
    <!-- Overlay -->
    <div id="id02" class="w3-modal"> </div>
    <div id="id01" class="w3-modal"> </div>
    <div id="id03" class="w3-modal"> </div>
    <!-- Begin Code Here -->
    <div id="Header"></div>
    <div id="acceptCookies" class="w3-panel w3-blue w3-card-12" style="position:fixed;bottom:0px;right:0px;width:100%;">
      <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
      <h3>This Site Uses Cookies</h3>
      <p>We use cookies to help improve the function of this site. <a href=cookies.html>Learn More</a></p>
      <button class="w3-btn w3-round-xxlarge" onclick="acceptCookies()">I Accept Cookies</button><br><br>
    </div>

So just to iterate, The cookie is properly set:

Name: acceptcookies Content: true Domain: .XXXXX.XXXX Path: / Send for: Any kind of connection Accessible to script: Yes Created: Tuesday, February 14, 2017 at 5:30:47 PM Expires: Wednesday, February 14, 2018 at 5:30:47 PM

But this code does nothing with hiding the div if the acceptcookies cookie is set, like expected.

Could i maybe switch from body onload to here:

<script type="text/javascript">
        $(document).ready(function() {
        $('#mySidenav').load('assets/static_html/navbar_links.html');
        $('#Header').load('assets/static_html/header_on.html');
        $('#Footer').load('assets/static_html/footer.html');
        $('#id02').load('assets/static_html/email_modal.html');
        $('#id01').load('assets/static_html/phone_modal.html');

        $(window).scroll(function(){
          if ($(this).scrollTop() > 100) {
          $('.scrollToTop').fadeIn();
          } else {
          $('.scrollToTop').fadeOut();
          }
        });
        //Click event to scroll to top
        $('.scrollToTop').click(function(){
          $('html, body').animate({scrollTop : 0},800);
          return false;
        });
      });
    </script>

if so how would i go about doing that?

Having Errors with reading cookies via javascript - do we need to guess what the errors are? — Jaromanda X
– Jaromanda X, Commented Feb 15, 2017 at 2:35
Since the cookie data is only needed client-side in this case, consider using LocalStorage instead. (developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) This makes for faster HTTP requests because less data is needed, and the responses from the server tend to be more cacheable. It's also a bit easier to work with than cookies. — Brad
– Brad, Commented Feb 18, 2017 at 4:25

Cogwizzle · Accepted Answer · 2017-02-15 03:40:11Z

1

Based on the way readCookie is written you could change this line in cookie or not from

if (result === "True") {

to

if(result) {

Because if it doesn't find the cookie then it will return null. The cookie will only ever be created if it is true. Hope this helps.

Part 2 Because you already have an jQuery.ready event we can leverage that to run the function after the entire DOM has been loaded. Below I have added the function call to the javascript segment at the bottom of your post. You will need to remove it from body onload.

$(document).ready(function() {
    $('#mySidenav').load('assets/static_html/navbar_links.html');
    $('#Header').load('assets/static_html/header_on.html');
    $('#Footer').load('assets/static_html/footer.html');
    $('#id02').load('assets/static_html/email_modal.html');
    $('#id01').load('assets/static_html/phone_modal.html');

    $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
      } else {
      $('.scrollToTop').fadeOut();
      }
    });
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });

    cookieornot();  // Function added here.
  });

edited Feb 15, 2017 at 3:40

answered Feb 15, 2017 at 2:46

Cogwizzle

5504 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Michael Dugas Over a year ago

It did not fix the issue, but it is shorter code so i most definately thank you for the input

Cogwizzle Over a year ago

Have you tried adding some console.logs to the script? Do you know if it is following the workflow you expect?

Michael Dugas Over a year ago

Console log shows that it cannot set property style of null at line 3 of cookieornot()

Michael Dugas Over a year ago

Uncaught TypeError: Cannot set property 'style' of null at cookieornot (cookieornot.js:4) at onload ((index):46) index ends up being the line with <body onload=""> tag

Cogwizzle Over a year ago

So the dom element doesnt exist when functio is called. Try cookieornot function call at bottom of page in script tags instead of in onload. May also try changing onload='cookieornot()' to onload='cookieornot' if the other thing doesnt work.

|

Michael Dugas · Accepted Answer · 2017-02-15 05:05:43Z

0

I had to remove the cookieornot() function from the external javascript then place it in a tag at the bottom of the body, Now everything looks and works fine. I am not positive why i had to do it this way...

I still call the cookieornot() from but now it works.

answered Feb 15, 2017 at 5:05

Michael Dugas

451 silver badge9 bronze badges

Collectives™ on Stack Overflow

Having Errors with reading cookies via javascript

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related