Fading doesn't work, JavaScript

Question

It's very simple task, but somewhere is a mistake.. I can't find out it.

function get(obj) { return document.getElementById(obj); }
var SomeObj = {
    t1:null,t2:null,
    hide: function() {
        if(parseFloat(get("wr_st").style.opacity)>0.45) {
            get("wr_st").style.opacity-=0.05;
        } else {
            clearInterval(SomeObj.t1);
        }
    },
    show: function() {
        if(parseFloat(get("wr_st").style.opacity)<1) {
            get("wr_st").style.opacity+=0.05;
        } else {
            clearInterval(SomeObj.t2);
        }
    },
    fade: function($wt) {
        if($wt==1) {
            clearInterval(menu.status.t2);
            menu.status.t1=setInterval('SomeObj.hide();',10);
        } else if($wt==2) {
            clearInterval(menu.status.t1);
            menu.status.t2=setInterval('SomeObj.show();',10);
        }
    }
}

So, I have an input (type=text). With attributes:

onfocus="SomeObj.fade(1);" 
onblur="SomeObj.fade(2);".

Onblur doesn't work. More precisely, this doesn't work:

get("wr_st").style.opacity+=0.05;

If I'll place here for ex.: alert('NOOOO'); it will be always in process, because opacity+=0.5 doesn't work.. Can you help me: WTF is that & why it doesn't work? Thank you..

Answer 1

You are adding a number to a string, which will convert the number to a string rather than converting the string to a number. If the current value is for example "0.7" you end up with "0.70.05" instead of 0.75 .

Parse the string before adding:

get("wr_st").style.opacity = (parseFloat(get("wr_st").style.opacity) + 0.05).toString();

(This of course is repeating the get call and the parsing more than neccesary, you can store immediate values in tempory variables to make the code less repetetive.)