Question

Hi guys I have two javascript functions here- in the first one I have to change the variable names from ‘element’ and ‘property’ to ‘celement’ and ‘cproperty’ to avoid them clashing with the other function. I was wondering is there any way to structure your functions so that they can have the same variable names used in them? Any advice would be amazing! many thanks

Javascript:

    function colorPickDynamic (startcolor, cp){
    var i,
        j,
        x,
        celement = []
        cproperty = []
    for (x=0, i = 2, j = 3; j <= arguments.length; i+=2, j+=2, x++) {
        celement[x]=arguments[i]
        cproperty[x]=arguments[j]
        }

        $(cp).ColorPicker({
            color: startcolor,
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500)
                return false
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500)
                return false
            },
            onChange: function (hsb, hex, rgb) {

                $(cp + ' div').css('backgroundColor', '#' + hex)
            for (x = 0; x < celement.length; x++) {
                    updateAllCSS(celement[x], cproperty[x], '#' + hex)
            }
            }
        })
    }


    var cssObject = {}

    function updateAllCSS() {

    var x,
        i,
        j,
        k,
        element = []
        property = []
        value = []

    for (x=0, i = 0, j = 1, k = 2; k <= arguments.length; i+=3, j+=3, k+=3, x++) {
        element[x]=arguments[i]
        property[x]=arguments[j]
        value[x]=arguments[k]
    }   

        //updateThemeCreatorCSS

    for (x = 0; x < element.length; x++) {
        updateThemeCreatorCSS(element[x], property[x], value[x])
    }

        //updateOutputCSS

    for (x = 0; x < element.length; x++) {  
        updateOutputCSS(element[x], property[x], value[x])
    }


        function updateThemeCreatorCSS(element, property, value) {
            $('#homeIframe').contents().find(element).css(property, value)
            $('#generalIframe').contents().find(element).css(property, value)
            $('#formIframe').contents().find(element).css(property, value)
        }


        function updateOutputCSS(element, property, value) {

           if (!cssObject[element]) cssObject[element] = {}
           cssObject[element][property] = value            


            $('#css_output').text('')
            for (var element in cssObject) {
            $('#css_output').append(element + ' {')
               var properties = cssObject[element]
               for (var property in properties) {
                  $('#css_output').append(property + ': ' + properties[property] + ' !important;')
               }
            $('#css_output').append('} <br />')
            }

        }
    }

Answer 1

You did quite well with your var declaration, only you forgot some commas so they got global. In colorPickDynamic:

var i,
    j,
    x,
    celement = [], // <- !!!
    cproperty = []; // semicolon optional, but recommended

and in updateAllCSS:

var x,
    i,
    j,
    k,
    element = [], // <- !!!
    property = [], // <- !!!
    value = []; // semicolon optional, but recommended

If you omit the comma, a semicolon will be automatically inserted (weird stuff happens because of this) and the end of the line will become the end of the declaration statement. The next line will just be interpreted as usual, and it is an assignment to a non-local variable. Your script was executed like

var i;
var j;
var x;
celement = [];
cproperty = [];