JavaScript variable out side function not retaining the value

Question

I have an issue with the code below, I'm using onclick attribute to call the function below, then checking for which type of data-attr is passed. then assigning it to a local variable outside the function. but some how it saves 1 attr and displays it on alert and show the other one as undefined and then when I click on the other attr it shows it and for the first one says undefined. my js and HTML below.

jQuery code:

<script>
var attr1 = null;
var attr2 = null;


function createLink(sportAttr) {

    if($(sportAttr).attr("data-provider-sport-id") != typeof undefined && $(sportAttr).attr("data-provider-sport-id") !== false) {

        attr2 = $(sportAttr).attr("data-provider-sport-id");

        //alert(attr2);
    }

    if($(sportAttr).attr("data-main-sport-id") != typeof undefined && $(sportAttr).attr("data-main-sport-id") !== false) {
        attr1 = $(sportAttr).attr("data-main-sport-id");
        //alert(attr1);
    }

    alert(attr1 + " and second attr is " + attr2);
    //it never reaches the next line because for some reason one of the attrs is always null
    if(attr1 != null && attr2 != null) {

        if(confirm("Are you sure you want to create this link")) {

        }

    }

}
</script>

HTML code:

<i data-provider-sport-id="9" onclick="createLink(this)">Music</i>

<b data-main-sport-id="17" onclick="createLink(this)">Music</b>

when I click on the first one it displays "undefined and second attr is 9".

when I click on the second one it displays "17 and second attr is undefined"

any clues?

@IndrasinhBihola - what?

Jaromanda X
– Jaromanda X

2015-10-05 10:23:56 +00:00
Commented Oct 5, 2015 at 10:23 — Jaromanda X
– Jaromanda X, Commented Oct 5, 2015 at 10:23

doldt · Accepted Answer · 2015-10-05 10:25:04Z

2

This check is incorrect:

$(sportAttr).attr("data-main-sport-id") != typeof undefined

See, typeof undefined is always the string 'undefined' (as typeof always returns a string). This statement will be true unless the data-attribute happens to be the same - i.e. string 'undefined'.

So your problem is not retention, but the fact that you overwrite the values due to misconfigured if statements.

To fix this, use this undefined check (which you probably tried in the first place):

typeof $(sportAttr).attr("data-main-sport-id") !== 'undefined'

Or just use plain comparison with undefined, without typeof (but this is less robust, so your intuition to use typeof was not bad, per se.):

$(sportAttr).attr("data-main-sport-id") !== undefined

answered Oct 5, 2015 at 10:25

doldt

4,5063 gold badges24 silver badges36 bronze badges

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

Comments

Manoj Shevate · Accepted Answer · 2015-10-05 10:37:53Z

2

Instead of checking if the attribute is not undefined and value is not false, you can check only the Truthy value as below -

var attr1 = null;
var attr2 = null;


function createLink(sportAttr) {

    if($(sportAttr).attr("data-provider-sport-id")) {

        attr2 = $(sportAttr).attr("data-provider-sport-id");

        //alert(attr2);
    }

    if($(sportAttr).attr("data-main-sport-id")) {
        attr1 = $(sportAttr).attr("data-main-sport-id");
        //alert(attr1);
    }

    alert(attr1 + " and second attr is " + attr2);
    //it never reaches the next line because for some reason one of the attrs is always null
    if(attr1 != null && attr2 != null) {

        if(confirm("Are you sure you want to create this link")) {

        }

    }

}

Hope this helps!

answered Oct 5, 2015 at 10:37

Manoj Shevate

7424 silver badges18 bronze badges

1 Comment

nSams Dev Over a year ago

yeah i guess thats another way to go on about it, thanks :)

gon250 · Accepted Answer · 2015-10-05 10:42:26Z

First I recommend to you avoid to set the onclick on your html, it's not a good practice. Also I have improved your code, take a look below:

JS:

$(document).ready(function(){
    $('.myAction').on('click', function(){
        createLink($(this).data('id'))
    });

});

function createLink(sportAttr) {
    if(typeof sportAttr !== 'undefined') {
        alert(sportAttr);
    }

}

HTML:

<i class="myAction" data-id="9" data-provider-sport-id="9">Music</i>

<b class="myAction" data-id="17" data-main-sport-id="17">Music</b>

Basically the idea is make a generic function and try to reduce the code and make it more clean, also you were not checking properly the undefined.

if(typeof sportAttr !== 'undefined') {
        alert(sportAttr);
    }

DEMO

I hope it's helps.

Pavel Gatnar · Accepted Answer · 2015-10-05 10:25:16Z

0

Remove typeof operator, typeof undefined is "undefined".

answered Oct 5, 2015 at 10:25

Pavel Gatnar

4,0532 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

JavaScript variable out side function not retaining the value

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related