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?

Answer 1

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 - ie 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

Answer 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!

Answer 3

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.

Answer 4

删除typeof运算符， typeof undefined为"undefined" 。