Results 1 to 2 of 2

Thread: Shortening a huge list using an array value

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Shortening a huge list using an array value

    Hello Guru's

    I need your help,

    As you can see below, I will end up having a huge list of code to accomplish an onblur and on focus scenario for a div and an input field. Is there a way to create a "list" and loop through it to accomplish what this code does line by line? Since I will have over 20 fields the page of code will be quite long.

    Code:
    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 would be:
    Code:
    f1,div_rssims_prefix
    f2,div_rssims_firstname
    f3,div_rssims_middlename
    ect.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    You can probably do even better than that, I would have to see the markup, but something like:

    Code:
    var inputs = document.getElementsByTagName('input'), i = inputs.length, re = /^f\d+$/;
    function focusfunc(){
    	this.style.borderColor = this.previousSibling.style.color = '#0033CC';
    }
    function blurfunc(){
    	this.style.borderColor = '#ABADB3';
    	this.previousSibling.style.color = '';
    }
    while(--i > -1){
    	if(re.test(inputs[i].id){
    		inputs[i].onfocus = focusfunc;
    		inputs[i].onblur = blurfunc;
    	}
    }
    The only thing I'm not sure of is the previousSibling bit. That is an attempt to get is a reference to the div_rssims_? for that input.

    I'm thinking that perhaps that might not be the previousSibling, and I'm thinking that the ? might be the name of the input, but I can't know for sure without seeing the markup. If it is or is something like that, we can use it to get the reference.

    If you want more help, please show me the HTML markup that goes with this.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Need help with HUGE XML project
    By TheFSD in forum Flash
    Replies: 0
    Last Post: 12-16-2009, 01:32 AM
  2. Insert into an array list
    By apj in forum JavaScript
    Replies: 2
    Last Post: 11-01-2009, 08:58 AM
  3. shortening RSS Feed in Advanced RSS Ticker
    By cbcostanza in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-23-2007, 07:28 PM
  4. Replies: 5
    Last Post: 06-21-2007, 09:29 PM
  5. Shortening HTML with Javascript
    By Agent Moose in forum JavaScript
    Replies: 15
    Last Post: 02-28-2007, 08:37 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •