Pass a new argument in Javascript code to target HTML5 attr

I currently have created a piece of Javascript code which checks a http response and if its a successful 200 code the traffic light shows green and if its not a 200 code the traffic light flashes red.

My current problem at the moment is I want to be able to pass Two arguments to the initializing function like so

requestResponses.init('/status', "ATTR");

The first attribute being the URL I want to test against and the second attribute being the value of the HTML5 data-request attribute I have created.

My reason for this as I want to have multiple traffic lights on the same page targeting different URL’s simultaneously without effecting each other.

So for Example I create a data request attribute and give it a value of Four I then want to be able to hook it up like so

requestResponses.init('/status', "Four");

and start targeting elements like below within the code. This makes it that bit more modular and reusable.

.cp_trafficLight[data-request="Four"]

Please find my code attached and a working JSFiddle.

var requestResponses = {

    greenLight: $('.cp_trafficLight_Light--greenDimmed'),
    redLight: $('.cp_trafficLight_Light--redDimmed'),
    greenBright: 'cp_trafficLight_Light--greenBright',
    redBright: 'cp_trafficLight_Light--redBright',

    settings: {
        flashError: 400,
        requestTime: 10000
    },

    init: function (url) {
        requestResponses.url = url;
        requestResponses.getResponse(requestResponses.url);
        setInterval(function () {
            if (requestResponses.errorCode === true) {
                requestResponses.redLight.toggleClass(requestResponses.redBright);
            }
        }, requestResponses.settings.flashError);
    },

    successResponse: function () {
        requestResponses.errorCode = false;
        requestResponses.redLight.removeClass(requestResponses.redBright);
        requestResponses.greenLight.addClass(requestResponses.greenBright);
    },

    errorResponse: function () {
        requestResponses.greenLight.removeClass(requestResponses.greenBright);
    },

    getResponse: function (serverURL) {
        $.ajax(serverURL, {
            success: function () {
                requestResponses.errorCode = false;
                requestResponses.successResponse();
            },
            error: function () {
                requestResponses.errorCode = true;
                requestResponses.errorResponse();
            },
            complete: function () {
                setTimeout(function () {
                    requestResponses.getResponse(requestResponses.url);
                }, requestResponses.settings.requestTime);
            }
        });
    },

    errorCode: false
}

requestResponses.init('/status');

https://jsfiddle.net/8700h582/

Appreciate any help!


Source: stackoverflow-javascript