SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding an attribute's value to a variable

    i have the following script:

    Code:
    var iteration = 0;
    
    		function AddToIngList (form, iteration)
    		{
    
    			var it = iteration;
    
    			var Ingredient = form.ingredienttoadd.value;
    			form.ingredients_added.value += Ingredient + "\n";
    
    			var objHTML, objText, objinput, objLink;
    
    			objHTML = document.createElement('P');
    			objHTML.setAttribute('NAME', 'txtTest'+1);
    			objHTML.setAttribute('ID', 'txtTest'+1);
       
    			var strTest = form.ingredienttoadd.value;
      			objText = document.createTextNode(strTest);
    
    			objinput = document.createElement
    ('INPUT');		
    			objinput.setAttribute('TYPE', 'text');
    			objinput.setAttribute('NAME', 'input'+it);
    			objinput.setAttribute('ID', 'input'+it);
    
    
    
    			objLink = document.createElement('A');
    			objLink.setAttribute('HREF', '#');
    			objLink.setAttribute('NAME', it);
    			var foo = objLink.getAttribute('NAME');
    			var strOnClick = 'Test(foo);';
    			objLink.setAttribute('onclick', strOnClick);
    			objLink.appendChild(document.createTextNode('Delete This'));
    
    			
    
    			form.appendChild(objHTML);		
    			objHTML.appendChild(objText);
    			objHTML.appendChild(objinput);
    			objHTML.appendChild(objLink);
    		
    		}
    
    		function Test
    (foo)
    		{
    			var d = document.getElementById('input'+foo);
    			d.parentNode.removeChild( d );
    
    			var e = document.getElementById('txtTest'+foo);
    			e.parentNode.removeChild( e );
    
    		}
    which is run on the click of a form button.

    basically when a user clicks a button, form.ingredienttoadd.value is dispayed followed by an input box and a <a> tag. on each click of the button var is updated, if the user clicks the button once TxtTest1 is displayed then a box called input 1 then a <a> with the name 1. on the second click the txtest is txtest2, the box is input2 etc.....

    when i click the link i get the error that foo is not defined. if i alert foo on the line under where it is defined it alerts the correct number. however if i alert foo in the Test function i get undefined which means there is a problem with the variable pass
    can any1 help?
    thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use setAttribute() to attach event handlers. It does not work consistently cross-browser.

    Change
    Code:
    var strOnClick = 'Test(foo);';
    objLink.setAttribute('onclick', strOnClick);
    to
    Code:
    objLink.onclick = function(){Test(foo);};
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,
    thats worked great!


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
  •