if condition not affecting display of div

Question

I have searched on StackOverflow but no questions matched my specific dilemma. I have a div with a class foo that is set via css to display: inline-block.

I would like foo to be visible when the variable temp is a number or a string, but not display when it is not a number or a string.

var temp;
        if (temp !== undefined || temp !== null) {
            temp = temp / 1000;
            temp = temp + 'K';
            $('.foo').css("display", "inline-block");
        }
        else {
            $('.foo').css("display", "none");
        }

When I run this code the "foo" does not display at all.

when I change the code to

var temp;
        if (temp != undefined || temp != null) {
            temp = temp / 1000;
            temp = temp + 'K';
            $('.foo').css("display", "inline-block");
        }
        if  (temp == undefined || temp == NaN) {
            $('.foo').css("display", "none");
        }

foo is still all set to display:"none"

I ran console.log on each if, and when temp is a value it does go through the first if and when it is NaN or null it does go through the second if. But why does ONLY the display: "none" take affect?

Thank you in advance. - VS

EDIT Changed code for first if in first code block

To clarif, temp is constantly being reset to a new value above this if using a .get function:

var temp =this.model.get('custitem_temp');

and this value is sucessfully being set multiple times. SOME of my console for reference:

temp is set using .get: 80000
temp inside FIRST IF: 80000
temp is set using .get: undefined
temp inside FIRST IF: undefined
temp is set using .get: undefined
temp inside FIRST IF: undefined
temp is set using .get: 80000
temp inside FIRST IF: 80000
temp is set using .get: undefined
temp inside FIRST IF: undefined
temp is set using .get: 80000
temp inside FIRST IF: 80000
temp is set using .get: undefined

...

and so on.

EDIT02:

Thank you for all your help. So from the suggestions, my code is now dividing undefined and values

         if (temp === undefined || temp === null) {
            console.log("temp (should be undefined): " + temp)
            console.log("inside IF");;  
            $('.foo').css("display", "none");
         }
         else {
            console.log("temp (should be a value): " + temp)
            console.log("inside ELSE: " + temp);    
            temp = temp / 1000;
            temp = temp + 'K';
            $('.foo').css("display", "inline-block");
            console.log("after ELSE: " + temp);
        }

and console reflects:

temp (should be a value): 80000
inside ELSE: 80000
after ELSE: 80K
temp (should be undefined): undefined
inside IF
temp (should be undefined): undefined
inside IF
temp (should be a value): 80000
inside ELSE: 80000
after ELSE: 80K
...

Nevertheless, I still get display: none; on foo

EDIT 03:

I added a console.log to output the display value:

            if (temp === undefined || temp === null) {
            console.log("temp (should be undefined): " + temp)
            console.log("inside IF");
            $('.foo').css("display", "none");
            console.log( "display value: " + $('.foo').css('display') );
         }
         else {
            console.log("temp (should be a value): " + temp)
            console.log("inside ELSE: " + temp);    
            temp = temp / 1000;
            temp = temp + 'K';
            $('.foo').css("display", "inline-block");
            console.log("after ELSE: " + temp);
            console.log( "display value: " + $('.foo').css('display') );
        }

My console log gives some interesting insight: Starts off like before, except saying the display value is undefined

temp (should be a value): 80000
inside ELSE: 80000
after ELSE: 80K
display value: undefined
temp (should be undefined): undefined
inside IF
display value: undefined
temp (should be undefined): undefined
inside IF

but then after about 9 loops it starts assigning a value to display:

temp (should be a value): 80000
inside ELSE: 80000
after ELSE: 80K
display value: undefined
temp (should be undefined): undefined
inside IF
display value: none
temp (should be undefined): undefined
inside IF
display value: none
temp (should be a value): 80000
inside ELSE: 80000
after ELSE: 80K
display value: block
temp (should be undefined): undefined
inside IF
display value: none

Any explanations?

Answer 1

Did you check your console? Your second if syntax is wrong. It should be like this

if (tempMileageWarranty == undefined || tempMileageWarranty == NaN)'

Copy paste mistakes aside...

.foo is getting set to display: none; because temp is undefined..

The code var temp; is going to make temp undefined, (passing your second if) because it is never assigned a value.

This might be some useful reading: JavaScript checking for null vs. undefined and difference between == and ===

Answer 2

t = typeof(temp);   
if(t == "undefined")
{
    console.log(temp +": do not display");  
}
else if(t == 'number' || t == 'string') {
    console.log(temp +": It is "+t+".So display the foo");
}

Try this code. I checked it with 3 value of temp.80000,"Foo",undefined and the result I got in console is like this.

80000: It is number.So display the foo
foo: It is string.So display the foo
undefined: do not display

I hope this will help you.

Answer 3

Quick note. Wanted to know if you noticed the double semicolon here.

console.log("inside IF");;  

Also I'd just do a quick and simple check on the defined state if temp and the ensure that it is not null.

if (temp && temp !== null) {
         console.log("temp (should be a value): " + temp)
        console.log("inside ELSE: " + temp);    
        temp = temp / 1000;
        temp = temp + 'K';
        $('.foo').css("display", "inline-block");
        console.log("after ELSE: " + temp);
 } else {
        console.log("temp (should be undefined): " + temp)
        console.log("inside IF");
        $('.foo').css("display", "none");
    }