Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    element.childNode.setAttribute('id','new_id') not working

    I had one of those nights last night. I got this script to work (in some iteration) and then proceeded to tune the list appearance with CSS rules and somewhere in the midst of it all I fouled the working script. I am stumped. I'll admit I am a noob, maybe even a noo. I am green.

    Here's the list I am trying to change. It comes from a php template I wish to not disturb for reasons of future upgrade path, etc.

    Code:
        <div class="event_fee_label">Tickets</div>
        <div class="form_amount">
            <ol id="form_amount_list">
                <li><input value="3" type="radio" id="e7" name="amount" checked="checked" /><label for="e7">$7.00 Faculty/Parents</label></li>
                <li><input value="4" type="radio" id="e5" name="amount" /><label for="e5">$5.00 Students</label></li>
                <li><input value="5" type="radio" id="e2" name="amount" /><label for="e2">$2.00 Senior Friends</label></li>
                <li><input value="6" type="radio" id="e0" name="amount" /><label for="e0">$0.00 Volunteers</label></li>
            </ol>
        </div>
    And I hope to achieve this:
    ...
    Code:
            <ol id="form_amount_list">
                <li id="opt1"><input ... ><label ...></li>
                <li id="opt2"><input ... ><label ...></li>
                <li id="opt3"><input ... ><label ...></li>
                <li id="opt4"><input ... ><label ...></li>
            </ol>
    The script I have been poking at every which way (but apparently not the right way):

    Code:
    	function feeAmountIds( ) {
    		var ticketprices=document.getElementById('form_amount_list');
    		ticketprices.childNodes[1].setAttribute('id','opt1');
    		ticketprices.childNodes[2].setAttribute('id','opt2');
    		ticketprices.childNodes[3].setAttribute('id','opt3');
    		ticketprices.childNodes[4].setAttribute('id','opt4');
    	}
    	window.onload=feeAmountIds;
    Any directions?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to consider the empty text nodes in between the list items, so all the childnodes might not be a list-item as you expected.
    Code:
    var ticketprices=document.getElementById('form_amount_list');
    var cN=ticketprices.childNodes;
    for(var i=0;i<cN.length;i++){
    if(cN[i].nodeName=='LI')
    	cN[i].setAttribute('id','opt'+i);
    }
    The above code would assign id values opt1,opt3,opt5 and opt7 in order. So, it's better to use the method getElementsByTagName() to specifically select all list items, like
    Code:
    var ticketprices=document.getElementById('form_amount_list');
    var cN=ticketprices.getElementsByTagName('LI');
    for(var i=0;i<cN.length;i++){
    	cN[i].setAttribute('id','opt'+i);
    }
    (You may avoid the issue with your current code by placing all the html in a single line without any space in between tags, but I wouldn't recommend it.)
    Last edited by abduraooft; 01-22-2010 at 02:11 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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