2
\$\begingroup\$

I'm making this control toggle between hide and show base on the value in this hidden value. I wanted to use a Boolean because I can just do something like == true. Is this the best way to do this? Working sample

https://jsfiddle.net/tjmcdevitt/4bdrfgcu/12/

    $("#hdMeetingDateId").val(500);
      //"#hdMeetingDateId").val(0);
      console.log($("#hdMeetingDateId").val());
                let hasMeetingDateId = $("#hdMeetingDateId").val() > '1' ;
      
      if (hasMeetingDateId == true) {
          $("#displayButton").hide();
      } else {
          $("#displayButton").show();
      }
\$\endgroup\$

2 Answers 2

1
\$\begingroup\$

Teepeemm is correct. It is best to avoid implicit type coercions and use strict equality operators like === and !==. The problem with loose comparisons (e.g. ==, !=) is that it has so many weird rules one would need to memorize in order to be confident in its proper usage.

Speaking of type coercion - it would be better to compare the value to the number one as a Number instead of a String

let hasMeetingDateId = $("#hdMeetingDateId").val() > '1' ;

Since the less than and greater than operators will attempt to convert both operands to numbers1 it would be simpler to just represent it as 1:

const hasMeetingDateId = $("#hdMeetingDateId").val() > 1 ;

And as was already mentioned jQuery's toggle() method can be used to simplify the conditionals. See this demonstrated in the snippet below. Note that the input was changed to an <input type=“number”>. Also the DOM ready callback was simplified because as of jQuery 3.0, only $(handler) is recommended; the other syntaxes still work but are deprecated.1. Also the code makes use of the ES6 feature arrow function expression.

$(_ => {  //jquery DOM ready callback with arrow function
    $('#hdMeetingDateId').change(function() { //change event handler
        const hasMeetingDateId = $(this).val() > 1;
        $("#displayButton").toggle(!hasMeetingDateId);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample</h1>
  <input type="range" name="hdMeetingDateId" id="hdMeetingDateId" value="4" min="0" max="5" />

<p>
    <button id="displayButton">Value Button</button>
</p>

\$\endgroup\$
2
  • \$\begingroup\$ Thanks what if I wanted to hide it for true? \$\endgroup\$
    – Jefferson
    Jan 28, 2022 at 14:03
  • \$\begingroup\$ Use the negated value: $("#displayButton").toggle(!hasMeetingDateId) \$\endgroup\$ Jan 28, 2022 at 14:05
2
\$\begingroup\$

As a general programming guide, you should avoid == true, and just use if ( hasMeetingId ). (Things are even worse in Javascript, because == behaves strangely, eg, 1==true is true. You should use === instead of == whenever possible.)

With Javascript, you could have $("#displayButton")[hasMeetingDateId?"hide":"show"](), and it would collapse those five lines into one less comprehensible line.

But jQuery is a bit more helpful. Instead of hide and show, you can use toggle and end up with $("#displayButton").toggle(hasMeetingDateId).

You should also use const instead of let, if you can.

\$\endgroup\$
1
  • \$\begingroup\$ What if I wanted to hide it for true? \$\endgroup\$
    – Jefferson
    Jan 28, 2022 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.