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
    199
    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,637
    Thanks
    6
    Thanked 1,004 Times in 977 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,696
    Thanks
    0
    Thanked 232 Times in 227 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,300
    Thanks
    28
    Thanked 275 Times in 269 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,298
    Thanks
    10
    Thanked 584 Times in 565 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 09:17 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    Rain Lover (02-12-2014)

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    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
    •