darbicus/Darbicus.js

## Darbicus.js
window.onload=function(){

/*counter is a simple counter. it will add 1 to the count value every time count() is called. the display('querySelector string', 'attribute to assign the value') function returns a function that displays the count value on the element using a querySelector string and then assigns the count to the attribute name.
 */

var counter = function () {
    var Counter = Object.create(null);
    Counter.Count = 0;
    Counter.count = function () {
        Counter.Count++;
    };
    Counter.display = function (e, n) {
        e = document.querySelector(e);
        return (function () {
            e[n] = Counter.Count;
            return true;
        });
    };
    return Counter;
};

/*eventGrabber can grab values from the event object. you specify these when initializing the object by passing the event object's name for these values as strings arguments ex:eventGrabber('pageX', 'pageY').
the names of theses values are stored in the first item in array
*/
var eventGrabber = function () {
    var e = [].slice.call(arguments),
        EventGrabber = Object.create(null);
    EventGrabber.values = [];
    e.forEach(function (E) {
        EventGrabber.values.push(E);
        EventGrabber[E] = 0;
    });
    EventGrabber.grab = function () {
        return (function (eve) {
            console.log(eve);
            EventGrabber.values.forEach(function (v) {
                EventGrabber[v] = eve[v];
            });
        });
    };
    EventGrabber.displayer = function (v, e, a) {
        e = document.querySelector(e);
        return function () {
            e[a] = EventGrabber[v];
            return true;
        };

    };
    return EventGrabber;
};


/*constructors*/
var egrab = eventGrabber('pageX', 'pageY');
var testvar = counter();


/*the simple event listeners*/
window.addEventListener('mousemove', egrab.grab());
window.addEventListener('click', testvar.count);


/*displayArray is an array that contains functions to display all the elements updated every time if they return true they will be kept in the array and if they return false they will only run once.*/
var displayArray = [
egrab.displayer('pageY', '#y', 'textContent'),
egrab.displayer('pageX', '#x', 'textContent'),
testvar.display('#count2', 'textContent')];

/* This is the animation function you shouldn't have to change this because all the functions should be in the displayArray */
(function anim() {
    displayArray = displayArray.filter(function (e) {
        return e();
    });
    requestAnimationFrame(anim);
})();

};

## ex.html
<html>
    <head>
        <script type="text/javascript" src="/Darbicus.js"></script>
    </head>

<body>
  <div>X: <span id="x">17</span>
Y: <span id="y">50</span>
</div>Click Count: <span id="count2">9</span>
</body></html>
	window.onload=function(){

	/*counter is a simple counter. it will add 1 to the count value every time count() is called. the display('querySelector string', 'attribute to assign the value') function returns a function that displays the count value on the element using a querySelector string and then assigns the count to the attribute name.
	*/

	var counter = function () {
	var Counter = Object.create(null);
	Counter.Count = 0;
	Counter.count = function () {
	Counter.Count++;
	};
	Counter.display = function (e, n) {
	e = document.querySelector(e);
	return (function () {
	e[n] = Counter.Count;
	return true;
	});
	};
	return Counter;
	};

	/*eventGrabber can grab values from the event object. you specify these when initializing the object by passing the event object's name for these values as strings arguments ex:eventGrabber('pageX', 'pageY').
	the names of theses values are stored in the first item in array
	*/
	var eventGrabber = function () {
	var e = [].slice.call(arguments),
	EventGrabber = Object.create(null);
	EventGrabber.values = [];
	e.forEach(function (E) {
	EventGrabber.values.push(E);
	EventGrabber[E] = 0;
	});
	EventGrabber.grab = function () {
	return (function (eve) {
	console.log(eve);
	EventGrabber.values.forEach(function (v) {
	EventGrabber[v] = eve[v];
	});
	});
	};
	EventGrabber.displayer = function (v, e, a) {
	e = document.querySelector(e);
	return function () {
	e[a] = EventGrabber[v];
	return true;
	};

	};
	return EventGrabber;
	};




	/constructors/
	var egrab = eventGrabber('pageX', 'pageY');
	var testvar = counter();



	/the simple event listeners/
	window.addEventListener('mousemove', egrab.grab());
	window.addEventListener('click', testvar.count);



	/displayArray is an array that contains functions to display all the elements updated every time if they return true they will be kept in the array and if they return false they will only run once./
	var displayArray = [
	egrab.displayer('pageY', '#y', 'textContent'),
	egrab.displayer('pageX', '#x', 'textContent'),
	testvar.display('#count2', 'textContent')];

	/* This is the animation function you shouldn't have to change this because all the functions should be in the displayArray */
	(function anim() {
	displayArray = displayArray.filter(function (e) {
	return e();
	});
	requestAnimationFrame(anim);
	})();

	};
	<html>
	<head>
	<script type="text/javascript" src="/Darbicus.js"></script>
	</head>

	<body>
	<div>X: <span id="x">17</span>
	Y: <span id="y">50</span>
	</div>Click Count: <span id="count2">9</span>
	</body></html>