CODEWITHSUNDEEP
javascriptjqueryboolean
Fernando Souza
Fernando Souza

Reputation: 1779

Javascript boolean parameter not passing correctly

I created a function with various if statements,that will be executed if a parameter is true. But passing false as a parameter doesn't seem to work. What am I doing wrong?

function easySlider(titleP, subTitleP, overlayP) {
  var title = titleP;
  var subTitle = subTitleP;
  var overlay = overlayP;

  if (title === true) {
    $(".sliderTitle").css("display", "block");
  } else {
    $(".sliderTitle").css("display", "none");
  }

  if (subTitle === true) {
    $(".sliderSubTitle").css("display", "block");
  } else {
    $(".sliderSubTitle").css("display", "none");
  }

  if (overlay === true) {
    $(".sliderOverlay").css("display", "block");
  } else {
    $(".sliderOverlay").css("display", "none");
  }
}

easySlider(true, false, true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="sliderTitle">Hello sliderTitle</h2>
<h3 class="sliderSubTitle">Hello sliderSubtTitle</h3>
<div class="sliderOverlay">Hello sliderOverlay</div>

Upvotes: 1

Views: 5048

Answers (3)

Zayn Ali
Zayn Ali

Reputation: 4915

You can try this

<div class="sliderTitle"></div>
<div class="sliderSubTitle"></div>
<div class="sliderOverlay"></div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    function easySlider(title, subTitle , overlay) {
        var titleDisplay     = title ? 'block' : 'none';
        var subTitleDisplay  = subTitle ? 'block' : 'none';
        var overlayDisplay   = overlay ? 'block' : 'none';

        $(".sliderTitle").css("display", titleDisplay);
        $(".sliderSubTitle").css("display", subTitleDisplay);
        $(".sliderOverlay").css("display", overlayDisplay);
    }

    easySlider(false, false, false);
</script>

Upvotes: 2

Franz Tesca
Franz Tesca

Reputation: 285

If that's your code (and you want to make all hidden on page load), you have to wait the document to be ready before calling the function:

function easySlider(titleP,subTitleP,overlayP){
    var title = titleP;
    var subTitle = subTitleP;
    var overlay = overlayP;

    if(title===true) {
        $(".sliderTitle").css("display","block");
    }else{
        $(".sliderTitle").css("display","none");
    }

    if(subTitle===true) {
        $(".sliderSubTitle").css("display","block");
    }else{
        $(".sliderSubTitle").css("display","none");
    }

    if(overlay===true) {
        $(".sliderOverlay").css("display","block");
    }else{
        $(".sliderOverlay").css("display","none");
    }   
}

$(document).ready(function(){
easySlider(false,false,false);
});

Otherwise, if you call the function after the document is loaded, it works fine.

Upvotes: 0

Lazy Coder
Lazy Coder

Reputation: 1217

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <p class="sliderTitle">
    Slider Title
    </p>
    <p class="sliderSubTitle">
    Slider Subtitle
    </p>
    <p class="sliderOverlay">
    Slider Overlay
    </p>

<script>
function easySlider(titleP,subTitleP,overlayP){

    var title = titleP;
    var subTitle = subTitleP;
    var overlay = overlayP;

    if(title===true) {
     $(".sliderTitle").css("display","block");
    }else{
     $(".sliderTitle").css("display","none");
    }
    if(subTitle===true) {
     $(".sliderSubTitle").css("display","block");
    }else{
     $(".sliderSubTitle").css("display","none");
    }
    if(overlay===true) {
     $(".sliderOverlay").css("display","block");
    }else{
     $(".sliderOverlay").css("display","none");
    }
}   


easySlider(true,false,false);

https://jsfiddle.net/me2b0r56/

seems to be working fine...

Upvotes: 0

Related Questions