if condition in javascript not working on null value

Question

what i am trying to do is, if text box have some value page should move to center div, when text box is empty page should stay on start position.

in my code page always goes to second div.

FIDDLE

$(document).ready(function() {
  if ((document.getElementById("textbox").value != null)) {

    // Handler for .ready() called.
    $('html, body').animate({
      scrollTop: $('#what').offset().top
    }, 'slow');

  }

});

div {
  height: 900px;
  border: 2px solid #333;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="textbox" />
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>

There is no way a textbox value will be null in modern browsers. In IE4 or so it would be null if the value attribute was not specified on the tag — mplungjan
– mplungjan, Commented Jul 16, 2020 at 12:17
value is always an empty string if it's not filled in. Even if the attribute is missing. — VLAZ
– VLAZ, Commented Jul 16, 2020 at 12:18

mplungjan · Accepted Answer · 2020-07-16 12:39:48Z

1

Test for the length of the trimmed value

That can handle spaces

NOTE the value of "0" is truthy

$(function() { // on page load
  if ($("#textbox").val().trim().length > 0) { // === 0 when empty
    // Handler for .ready() called.
    $('html, body').animate({
      scrollTop: $('#what').offset().top
    }, 'slow');
  }
});

div {
  height: 900px;
  border: 2px solid #333;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="textbox" value="" />
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>

edited Jul 16, 2020 at 12:39

answered Jul 16, 2020 at 12:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

4 Comments

Fayakon Over a year ago

i want to run it automatically when page loads

mplungjan Over a year ago

My code runs automatically on page load, I only removed unnecessary code

Fayakon Over a year ago

if i put no value in text box, $(function() { if ($("#textbox").val().trim().length < 0) { // Handler for .ready() called. alert("dd"); } }); why this isn't working

mplungjan Over a year ago

because it is === 0 when empty

mplungjan · Accepted Answer · 2020-07-16 12:25:24Z

0

Remove the camparison with null:

if (document.getElementById("textbox").value !== '') {

    // Handler for .ready() called.
    $('html, body').animate({
      scrollTop: $('#what').offset().top
    }, 'slow');

  }

edited Jul 16, 2020 at 12:25

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jul 16, 2020 at 12:19

Helper

8478 silver badges17 bronze badges

3 Comments

Helper Over a year ago

@mplungjan, I didn't knew "0" is false as well. I thought integer 0 is false.

VLAZ Over a year ago

"0" is indeed truthy. Also see the JS equality table - go to the if () tab.

mplungjan Over a year ago

This is actually ok as long as there are no spaces in the field

Robin Webb · Accepted Answer · 2020-07-16 12:28:49Z

0

Change != null to !==''

$(document).ready(function() {
  if ((document.getElementById("textbox").value !== '')) {

    // Handler for .ready() called.
    $('html, body').animate({
      scrollTop: $('#what').offset().top
    }, 'slow');

  }

});

div {
  height: 900px;
  border: 2px solid #333;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="textbox" />
<div id="mydiv">DATA FOR SAMPLE 1</div>
<div id="what">SAMPLE DATA</div>

edited Jul 16, 2020 at 12:28

answered Jul 16, 2020 at 12:20

Robin Webb

1,5311 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

if condition in javascript not working on null value

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related