Object Testing

Messing around with objects...

by guyluchenbill

HTML

<dl>
    <dd>Animal Type: <input type='text' id='animalType' /></dd>
    <dd>Animal Color: <input type='text' id='animalColor' /></dd>
    <dd><input type='submit' id='submit' value='Submit' /></dd>
    <dd><input type='submit' id='clear' value='Clear' /></dd>
    <dd id='output'></dd>
</dl>

CSS

dl { 
  background-color: #bbb;  
  width: 300px;     
  padding: 20px; 
  margin: 20px auto 0 auto; 
  border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);  
  color: #181818;     
  font: 12px/20px "Georgia" serif; 
  #text-transform: uppercase; 
}
dd { 
  padding-bottom: 10px; 
}
#submit, #clear { 
  width: 300px; 
  height: 25px;     
}

JavaScript

var $ = function(ele) { 
   return document.getElementById(ele);  
}; 
var c = function() { 
    var x = new Animal(); 
    return x; 
} 
var Animal = function() {};
Animal.prototype = { 
    constructor: Animal, 
    getValues: function() { 
        console.log('hi'); 
    }
};
var submit = $('submit'); 
submit.addEventListener('click', c.getValues, false); 
console.log(x);





//x.getValues(); 
//var c = $('clear'); 
//c.addEventListener('click', obj.clear, false); 
    //this.type = type;  
    //this.color = color;  
    //output.innerHTML = '<p>Animal Type: ' + type + '</p>'; 
    //output.innerHTML += '<p>Animal Color: ' + color + '</p>';
/*
    clear: function() { 
        $('animalType').value = ''; 
        $('animalColor').value = '';  
        $('output').innerHTML = '';         
    },
*/