See tutorial article at Object Oriented Programming with Javascript .
This is an exctract of the code used for the Miss Manners demo application I wrote on December 22 2007.
Note that there is the button with a onclick="createGuest('container')"
handler
/**
* Our MissManners application
*/
var MissManners = {
nextUniqueId : 0
};
/**
* A miss manners guest
* @constructor
* @param {Object} params The parameters object. All other parameters are named properties of this object
* @param {String} name The guest name
* @param {String} gender The guest gender. 'male' or 'female'
* @param {String} interest The guest interest. A single string. You should give guests interests so that some match up - this is what the rule engine bases their placemenet on.
* @param {String} color Hexadecimal value of the color to represent the guest with.
*/
MissManners.Guest = function(params) {
this.name = params.name || this.Default.name;
this.gender = params.gender ? params.gender.toLowerCase() : this.Default.gender;
this.interest = params.interest ? params.interest.toLowerCase() : this.Default.interest;
this.color = params.color || this.Default.color;
this.id = 'MMGuest-' + MissManners.nextUniqueId++;
}
/**
* Generate and Html snippet to represent the guest.
*/
MissManners.Guest.prototype.toHtml = function() {
var result = '';
result += '<div class="missMannersGuest" id="'+this.color+'" style="background-color:'+this.color+'">';
result += '<ul>';
result += '<li>Name: '+this.name;
result += '<li>Gender: '+this.gender;
result += '<li>Interest: '+this.interest;
result += '</ul>';
result += '</div>';
return result;
}
/**
* The default values for a guest.
*/
MissManners.Guest.prototype.Default = {
name : 'Joan Doe',
gender : 'female',
interest : 'weather',
color : '#def'
}
// ...
function getVal(id) {
return document.getElementById(id).value;
}
function createGuest(divId) {
var guest = new MissManners.Guest({
name : getVal('name'),
gender : getVal('gender'),
interest : getVal('interest'),
color : getVal('color')
});
var wrapper = document.createElement('div');
wrapper.innerHTML = guest.toHtml();
document.getElementById(divId).appendChild(wrapper);
}