This is my first attempt at creating my own objects. I'm trying to get away from my procedural mind set. I just want to know if I'm doing it the right way..

Code HTML4Strict:
<input type="text" id="field">

Code JavaScript:
function changeBorder(elementId){
	var el = document.getElementById(elementId);
 
	function toRed(){
		el.style.borderColor = "red";
	}
 
	function toBlue(){
		el.style.borderColor = "blue";
	}
	this.toRed = toRed;
	this.toBlue = toBlue;
}
 
window.onload = function(){
	document.getElementById("field").onclick = function(){
		var redBorder = new changeBorder(this.id);
		redBorder.toRed();
	};
}

This code does what I want - it changes the border color onclick, but I want to know if when making user defined objects if you always have to first make the function of what you want to happen:

Code JavaScript:
function changeBorder(elementId){
	var el = document.getElementById(elementId);
 
	function toRed(){
		el.style.borderColor = "red";
	}
 
	function toBlue(){
		el.style.borderColor = "blue";
	}
	this.toRed = toRed;
	this.toBlue = toBlue;
}

and then to use that function (or, object code) do you always have to define a new instance of the object like:

Code JavaScript:
var redBorder = new changeBorder(this.id);

I think in practice if I wanted to change border color I'd be better off calling a plain old function with a line or two of code. Here I'm just trying to understand the concept of using custom objects.