javascript - Shortening a huge list using an array value -
i need help,
as can see below, end having huge list of code accomplish onblur , on focus scenario div , input field. there way create "list" , loop through accomplish code line line? since have on 20 fields page of code quite long.
document.getelementbyid('f1').onfocus = function() { document.getelementbyid('f1').style.border = '1px solid #0033cc' document.getelementbyid('div_rssims_prefix').style.color = '#0033cc' } document.getelementbyid('f1').onblur = function() { document.getelementbyid('f1').style.border = '1px solid #abadb3' document.getelementbyid('div_rssims_prefix').style.color = '' } document.getelementbyid('f2').onfocus = function() { document.getelementbyid('f2').style.border = '1px solid #0033cc' document.getelementbyid('div_rssims_firstname').style.color = '#0033cc' } document.getelementbyid('f2').onblur = function() { document.getelementbyid('f2').style.border = '1px solid #abadb3' document.getelementbyid('div_rssims_firstname').style.color = '' } document.getelementbyid('f3').onfocus = function() { document.getelementbyid('f3').style.border = '1px solid #0033cc' document.getelementbyid('div_rssims_middlename').style.color = '#0033cc' } document.getelementbyid('f3').onblur = function() { document.getelementbyid('f3').style.border = '1px solid #abadb3' document.getelementbyid('div_rssims_middlename').style.color = '' }
an ideal list be:
f1,div_rssims_prefix f2,div_rssims_firstname f3,div_rssims_middlename
ect.
you can use javascript object map fields out, loop through object assign events.
working example: http://jsfiddle.net/jzcqv/1/
var objfocuspairs = { "f1": "div_rssims_prefix", "f2": "div_rssims_firstname", "f3": "div_rssims_middlename" } (var curid in objfocuspairs) { document.getelementbyid(curid).onfocus = function(strid){ return function(){focusstyle(strid)}; }(curid); document.getelementbyid(curid).onblur = function(strid){ return function(){blurstyle(strid)}; }(curid); } function focusstyle(strid) { document.getelementbyid(strid).style.backgroundcolor = 'aliceblue'; document.getelementbyid(objfocuspairs[strid]).style.color = 'mediumblue'; } function blurstyle(strid) { document.getelementbyid(strid).style.backgroundcolor = ''; document.getelementbyid(objfocuspairs[strid]).style.color = ''; }
Comments
Post a Comment