I'm getting this jQuery - Uncaught Type Error: string is not a function error now

What could be wrong?

Below is my code

$(function(){
    $('#tabs').tabs();
    inputs = $('input[type="range"]#defaultSlider');
    slider = '#slider-one';
    tab = '#tabs-1';
    slider(inputs,slider,tab);

    var firstTab = $('#tabs ul li')[0];
    var secondTab = $('#tabs ul li')[1];
    $(firstTab).live('click',function(){
        $('#slider-two').hide();
        $('#slider-one').show();
        inputs = $('input[type="range"]#defaultSlider');
        slider = '#slider-one';
        tab = '#tabs-1';
        slider(inputs,slider,tab);
    });
    $(secondTab).live('click',function(){
        $('#slider-two').show();
        $('#slider-one').hide();
        inputs = $('input[type="range"]#defaultSlider-2');
        slider = '#slider-two';
        tab = '#tabs-2';
        slider(inputs,slider,tab);
    });

    function slider(inputs, slider, tab){
        $(inputs).live('change',function (event) {
            console.log(inputs);
            var updatedRangeValue = event.target.value;
            var currentValue = updatedRangeValue - 1
            currentStep = $(slider + ' dl.steps dt')[currentValue];
            $(slider + ' dl.steps dt').removeClass('active');
            $(currentStep).addClass('active');
            var currentArticle = $(tab + ' article')[currentValue];
            $(tab + ' article').hide();
            $(currentArticle).show();

            value = (event.target.value - event.target.min)/(event.target.max - event.target.min);
            $(event.target).css({
                backgroundImage: '-webkit-gradient(linear, left top, right top, color-stop(' + value + ', #007fb0), color-stop(' + value + ', #024069))'
            });
        });
    }

});

I'm getting this jQuery - Uncaught Type Error: string is not a function error now

What could be wrong?

Below is my code

$(function(){
    $('#tabs').tabs();
    inputs = $('input[type="range"]#defaultSlider');
    slider = '#slider-one';
    tab = '#tabs-1';
    slider(inputs,slider,tab);

    var firstTab = $('#tabs ul li')[0];
    var secondTab = $('#tabs ul li')[1];
    $(firstTab).live('click',function(){
        $('#slider-two').hide();
        $('#slider-one').show();
        inputs = $('input[type="range"]#defaultSlider');
        slider = '#slider-one';
        tab = '#tabs-1';
        slider(inputs,slider,tab);
    });
    $(secondTab).live('click',function(){
        $('#slider-two').show();
        $('#slider-one').hide();
        inputs = $('input[type="range"]#defaultSlider-2');
        slider = '#slider-two';
        tab = '#tabs-2';
        slider(inputs,slider,tab);
    });

    function slider(inputs, slider, tab){
        $(inputs).live('change',function (event) {
            console.log(inputs);
            var updatedRangeValue = event.target.value;
            var currentValue = updatedRangeValue - 1
            currentStep = $(slider + ' dl.steps dt')[currentValue];
            $(slider + ' dl.steps dt').removeClass('active');
            $(currentStep).addClass('active');
            var currentArticle = $(tab + ' article')[currentValue];
            $(tab + ' article').hide();
            $(currentArticle).show();

            value = (event.target.value - event.target.min)/(event.target.max - event.target.min);
            $(event.target).css({
                backgroundImage: '-webkit-gradient(linear, left top, right top, color-stop(' + value + ', #007fb0), color-stop(' + value + ', #024069))'
            });
        });
    }

});

• javascript
• jquery

• 2 You assign a string to slider and then attempt to invoke it as a function. It's not a function so you get an error. What is slider meant to be? – James Allardice Commented Dec 18, 2012 at 10:37
• slider is meant to be the function as declared at the very bottom. You're still overwriting it though. – Niko Commented Dec 18, 2012 at 10:39

1 Answer 1

You have conflicting variable names:

    slider = '#slider-one';     // You re-define `slider` here
    tab = '#tabs-1';
    slider(inputs,slider,tab);  // Then you try to call the original `slider`

Rename slider to something else and it should work just fine (you've got two blocks of code that look like this):

    slider1 = '#slider-one';
    tab = '#tabs-1';
    slider(inputs,slider1,tab);