如果设置了cookie，则显示div

Question

I'm using js-cookie to set a cookie. I've got a div which is set to display: none; and if the cookie is set I want to change it to display:block; .

The HTML:

<div id="cookie-hide">
  <p>test</p>
 </div>

The CSS:

<style>
#cookie-hide {display: none;}
</style>

This is the JS:

<script>
function checkCookie() {
    var user= Cookies.get('video')
    if (user != "") {
      document.getElementById("cookie-hide").style.display = "block";
    }
}

Cookies.set('video', 'play');
</script>

I can see in chrome that the cookie has been set but the div still doesn't display. Any ideas what's wrong with the code?

Answer 1

Do it as:

if (user == "") {
var x = document.getElementById("cookie-hide");
x.style.display = "block";
}

This should work

Answer 2

The code is fine. You are not calling the function anywhere.

function checkCookie() {
    var user= Cookies.get('video')
    if (user != "") {
        document.getElementById("cookie-hide").style.display = "block";
    }
}

Cookies.set('video', 'play');

checkCookie();         // <----- This line.

DEMO: https://jsfiddle.net/u1x030b4/