Question

I want to pass the string value which I get from the textarea into the focus() and blur(),
but why what I will get is [object object]?

I get the string value of each textarea successfully with each() and I store the string in a var – var value_default = $this.val();

Then I pass this var into $this.focus(function (value_default) {..}) – am I passing it incorrectly?

If I alert this value_default I will get [object oject] – alert(value_default);

Below is the entire code if you need to see it…

$(".autohide").each(function(){

    /* set the variable and store its value */
    var $this = $(this);

    var value_default = $this.val();

    var parent_autohide = $this.parents('form');

    var parent_button = $('input[type=submit]',parent_autohide).parents("div:.item-form").hide();


    var parent_marginbottom = parseInt($this.parents("div:.item-form").css("marginBottom"));

    $this.parents("div:.item-form").css({margin:'0px'});

    alert(value_default); // I will get the string value of each textarea element

    $this.focus(function (value_default) {

        alert(value_default); // I will get [object object]

        var $this = $(this);

        $this.elastic();

        $this.parents('div:.item-form').css({margin:'0px 0px '+parent_marginbottom+'px 0px'});

        var $this_parent = $this.parents('form');

        var $this_button =  $('input[type=submit]',$this_parent).parents("div:.item-form").show();


    }).blur(function(value_default){

        alert(value_default); // I will get [object object]

        var $this = $(this);

        var value_current = $this.val();

        if ( value_current == value_default) 
        {
            $this.css({ height: 'inherit'});

            $this.parents('div:.item-form').css({margin:'0px'});

            var $this_parent = $this.parents('form');

            var $this_button =  $('input[type=submit]',$this_parent).parents("div:.item-form").hide();

        }
    });

});

many thanks.

edit:

I know what was causing the error on IE –

$this.css({height: 'inherit'}); // this line will create error on IE

$this.css({height:''}); // IE likes this

so what is wrong with ‘inherit’ that IE won’t take it like other browsers!??

Answer 1

As the commenter has said, the function you create that handles the focus and the blur has the first parameter (event parameter) defined as value_default, which is overriding the one you declare higher up.

So it should work if you just do:

.focus(function(){ and .blur(function(){

Thus you should be able to access the value_default you declare before as it is still within scope and not being overridden by your function parameters.