Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    if (var) vs. if (var != “”)

    Sample:

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>Check Text Field Value</title>
        <style>
        </style>
    </head>
    
    <body>
        <textarea rows="5" cols="35" id="field" oninput="indicate();"></textarea>
        <div id="indicator"></div>
        <script>
            function indicate() {
                var field = document.getElementById('field');
                var indicator = document.getElementById('indicator');
                if (field.value) {
                    indicator.innerHTML = 'Some content';
                } else {
                    indicator.innerHTML = 'No content';
                }
            }
            indicate();
        </script>
    </body>
    
    </html>
    Demo: http://jsfiddle.net/RainLover/eZaRd/

    I want to check if the text field is empty or not. I've seen many questions and answers some using if (textarea.value) and some using if (textarea.value != ""). Or the following pair:
    if (!textarea.value) vs. if (textarea.value == "").

    I wonder what's the difference between them.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,872
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    if (!textarea.value) checks whether a value exists while if (textarea.value == "") assumes that a value exists and checks if it’s empty. However, in this case it doesn’t make much of a difference, I guess.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Rain Lover,

    does this help...
    Code:
    
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    <title>Check Text Field Value</title>
    
    <script>
    (function() {
       'use strict';
    
       var field,indicator;
    
    function init() {
       field=document.getElementById('field');
       indicator=document.getElementById('indicator');
    field.oninput=function() {
       indicate();
     }
       indicate();
     }
    
    function indicate() {
    if(field.value.replace(/\s/g,'').length==0) {
       indicator.innerHTML='No content';
     } 
    else {
       indicator.innerHTML='Some content';
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    </script>
    
    </head>
    <body>
    
    <textarea id="field" rows="5" cols="35"></textarea>
    <div id="indicator"></div>
    
    </body>
    
    </html>

    coothead

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Rain Lover View Post
    I want to check if the text field is empty or not. I've seen many questions and answers some using if (textarea.value) and some using if (textarea.value != ""). Or the following pair:
    if (!textarea.value) vs. if (textarea.value == "").

    I wonder what's the difference between them.
    if statements take Boolean, true-false arguments.

    textarea.value is a string value which implicitly gets type-converted to the required Boolean value. !textarea.value is a string value which gets coerced into a Boolean value by use of the logical not operator (!); the value is type-converted to a Boolean and, then, flipped to the opposite Boolean value.

    The other two techniques use comparison operators (!= and ==) which return Boolean values. The original values aren't type-converted.

    IMO, it's a better choice to use arguments of the expected type when available, so the versions that make use of comparison operators would be better. The lack of type conversion is more efficient, I'd expect, and doesn't require you to remember what should happen when you type convert from type A to type B.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    re: if (!textarea.value) vs. if (textarea.value == "")

    the first one will identify <div> tags as empty textareas while the second one will only identify empty <input>, <select>, and <textarea> tags (plus maybe a few quirks like <li> depending on the browser).

    therefore, if the variable textarea is indeed a textarea, the two always produce the same output given the same input.

    given that ({a:0}).a=="" is true, more explicit type comparisons may be required for handling numerical user input than text input.
    Last edited by rnd me; 02-11-2014 at 10:17 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    Rain Lover (02-12-2014)

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    therefore, if the variable textarea is indeed a textarea, the two always produce the same output given the same input.
    Thanks! That's what I was going to make sure of.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •