Overriding Functions

Figuring out how I can pass in a custom fuction

by tomjleo

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<form>
<label for="id_cpu">CPU</label>
<input type="text" id="id_cpu" />
<label for="id_ram">RAM</label>
<input type="text" id="id_ram" />
</form>

JavaScript

function computer(custom_parts) {
	var default_parts = {
    	'cpu': '2Ghz,
        'ram': '2G',
        'cpu_field_id': 'id_cpu',
        'ram_field_id': 'id_ram'
    }
    var params = $.extend({}, default_parts, custom_parts);
    var cpu_elem = document.getElementById(params.cpu_field_id);
    
    var default_cpu_handler = function(e) {
    	alert("CPU " + cpu_elem.value());
    }
    
    var cpu_handler;
    if (params.hasOwnPropertyc('cpu_handler')) {
    	cpu_handler = params.cpu_handler;
    } else {
    	cpu_handler = default_cpu_handler;
    }
    
    cpu_elem.addEventListener('blur', cpu_handler);
}

// Basic example With no overrides
computer();

// Override cpu_handler method
if (false) { //Disable for now
    computer({
        cpu_handler: function(e) {
            alert("New CPU " + cpu_elem.value());
        }
    });
}