CODEWITHSUNDEEP
javascriptjqueryhtml
KodeFor.Me
KodeFor.Me

Reputation: 13511

HTML5 data attribute is empty, but javascript does not agree with this situation

I am trying to make some functionality with JavaScript but JavaScript does not agree with logic.

In my console I have inspect the element that I try to manipulate and I have this code:

<input type="text" id="address" autocomplete="off" data-lat="" data-lng="">

and then I like to check if the data-lat or the data-lng attributes are empty.

In my JavaScript file I have this code:

$addressField.on(
    'blur',
    function()
    {
        console.assert($addressField.attr('data-lat') != '',    'Address latitude it is not empty');

        if($addressField.val() == '')
        {
            $addressField.attr('data-lat', '').attr('data-lng', '').val('');
        }
        else if($addressField.attr('data-lat') == '' || $addressField.attr('data-lng') == '')
        {
            $addressField.attr('data-lat', '').attr('data-lng', '').val('');
        }
    }
)

When I load my page, I am getting the following message in my console:

Assertion failed: Address latitude it is not empty

Am I doing something wrong ? Or just JavaScript getting in sane ?

UPDATE #1

I am sorry, but I didn't made clear that I run this code on blur event of the $addressField. I have modify the code, in order to meed the actual code.

UPDATE #2

Most of you have stack on the console.assert, but even If I don't use the console.assert, the else if( .... ) statement is getting again to false, and the second block does not executed.

The console.assert used only to help me identify the problem.

Upvotes: 0

Views: 359

Answers (3)

eAbi
eAbi

Reputation: 3450

Regarding UPDATE #2

@Praveen Jeganathan said already that your assertion fails, which means that $addressField.attr('data-lat') != '' is false. This means that the value of $addressField.attr('data-lat') is equal (or can be evaluated) to ''(i.e. empty), and thus the first if statement is true, and the first block gets executed:

if($addressField.val() == '') //this expression is true
{
    //this code is going to be executed
    $addressField.attr('data-lat', '').attr('data-lng', '').val('');
}
else if($addressField.attr('data-lat') == '' || $addressField.attr('data-lng') == '')
{
    //this block it's not going to be executed, because the first one
    //was, EVEN THOUGH the expression from this if statement
    //evaluates to TRUE
    $addressField.attr('data-lat', '').attr('data-lng', '').val('');
}

This is the same thing as writing:

var someVar = 5;
if(someVar === 5) { /* Do something here */}
else if(someVar === 5) {
    //How am I going to execute this code!?!
    //The first one will always get executed
    //If the first one will not get executed, I will never be executed too.
}

Upvotes: 1

Praveen
Praveen

Reputation: 56511

This is the exact behavior.

Since the value is empty $addressField.attr('data-lat') != '' is false and therefore the assert is getting executed. This is right.

This is how the message will get logged in chrome, check this docs

If the specified expression is false, the message is written to the console along with a stack trace.

Upvotes: 1

Roy
Roy

Reputation: 745

In Javascript the comparison operators == and === mean different things. Best practice is to simply avoid == and use === in almost all cases.

Upvotes: 1

Related Questions