jquery cookies - IF statement

Question

I am using jquery-1.11.1.min.js and I have have this script:

<script type="application/javascript" src="jquery-1.11.1.min.js"></script> 
<script>

function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) 
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
return "";
}

function checkCookie()
{
var x=getCookie("cookiename");
if (x!="")
  {

            if (x="no")
                    {
                        $('.text').hide('slow'); 
                        $('#less').attr('style','display: none;');
                        $('#more').attr('style','display: block;');
                    }

            if (x="yes")
                    {
                        $('.text').show('slow');
                        $('#less').attr('style','display: block;');
                        $('#more').attr('style','display: none;');
                    }

  }


else 
  {

    setCookie("cookiename","no",30);
    $('.text').hide('slow'); 
    $('#less').attr('style','display: none;');
    $('#more').attr('style','display: block;');
  }
}

</script>

lorem ipsum
<div class="text">
 SOME TEXT
</div>

  <div id="less">
 <a href="#" class="hidemore">Hide more</a>
 </div>
 <div id="more">
  <a href="#" class="showmore">Show more</a>
 </div>


  <script type="text/javascript">
  $(document).ready(function() {
    checkCookie();
    });

    $('.showmore').click(function() {
     $('.text').show('slow');
     $('#less').attr('style','display: block;');
     $('#more').attr('style','display: none;');
     setCookie("cookiename","yes",30);

    });

    $('.hidemore').click(function() {
      $('.text').hide('slow'); 
      $('#less').attr('style','display: none;');
     $('#more').attr('style','display: block;');
     setCookie("cookiename","no",30);

    });
  </script>

I need to create a cookie that will remember your choice (SHOW or HIDE text in div class="text" ) on page load.

I think i have mistake in function checkCookie() because it ignores cookie and div class="text" is always SHOW

Can you please help me?

thank you!

Answer 1

I've commented your code below:

if (x!="") // if x is not ""  - let's assume it's true
{

  if (x="no") // here you assign x value "no" - so the if is similar to if("no")
  {
  // since x="no" happens to be "truthy" this block code will execute and will HIDE the div with class .text
    $('.text').hide('slow'); 
    $('#less').attr('style','display: none;');
    $('#more').attr('style','display: block;');
  }

  if (x="yes") //here you assign x value "yes" - again this is similar to writing if("yes")
  {
  // since x="yes" is again "truthy" this code block will execute also SHOWING the div with class .text
    $('.text').show('slow');
    $('#less').attr('style','display: block;');
    $('#more').attr('style','display: none;');
  }

}

So you should switch to x=="no" and x=="yes" or better yet to always use === for equality operator and !== for inequality operator in javascript.