Javascript boolean parameter not passing correctly

Question

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>

Other than not caching the DOM access and the unneeded assignments, there's nothing wrong with that code I can see. Also curious why you're not using .hide and .show... — Jared Smith
– Jared Smith, Commented Aug 3, 2016 at 16:16
Have you tried with a double equal (==) in the if statement? — therealbischero
– therealbischero, Commented Aug 3, 2016 at 16:16
But passing false as a parameter doesn't seem to work What doesn't work? Describe the problem please — Alon Eitan
– Alon Eitan, Commented Aug 3, 2016 at 16:16
What you have should work fine (and does: jsfiddle.net/ag0myjes), although note you can shorten your code massively by just using toggle(): jsfiddle.net/ag0myjes/1 — Rory McCrossan
– Rory McCrossan, Commented Aug 3, 2016 at 16:16
@ope95 that is a terrible idea. Why would you even suggest that, especially in a boolean context... — Jared Smith
– Jared Smith, Commented Aug 3, 2016 at 16:17

Zayn Ali · Accepted Answer · 2016-08-03 16:40:18Z

2

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>

edited Aug 3, 2016 at 16:40

answered Aug 3, 2016 at 16:25

Zayn Ali

4,9351 gold badge32 silver badges41 bronze badges

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

Comments

Lazy Coder · Accepted Answer · 2016-08-03 16:21:56Z

0

 <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...

answered Aug 3, 2016 at 16:21

Lazy Coder

1,2171 gold badge10 silver badges18 bronze badges

1 Comment

Franz Tesca Over a year ago

That's because jsfiddle by default wait the document ready state before running javascript. Just edit settings to make it run immediately in head tag and it works no more: jsfiddle.net/me2b0r56/1

Franz Tesca · Accepted Answer · 2016-08-03 16:21:58Z

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.

Collectives™ on Stack Overflow

Javascript boolean parameter not passing correctly

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related