SitePoint Sponsor

User Tag List

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

    DOM - adding a <a> tag

    hi,
    i have the following javascript

    Code:
    	<script language="JavaScript">
    
    		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');
    			objHTML.setAttribute('ID', 'txtTest');
       
    			var strTest = form.ingredienttoadd.value;
      			objText = document.createTextNode(strTest);
    
    			var strText = 'http://www.sitepoint.com';
    			objLink = document.createElement('A');
    			objLink.setAttribute('HREF', 'strText'); 
    
    			objinput = document.createElement
    ('INPUT');		
    			objinput.setAttribute('TYPE', 'text');
    			objinput.setAttribute('NAME', 'input'+it);
    
    			form.appendChild(objHTML);		
    			objHTML.appendChild(objText);
    			objHTML.appendChild(objinput);
    			objHTML.appendChild(objLink);
    		
    		}
    
    	</script>
    which is run when a button is clicked. basically it adds text which is retrieved from a drop down box and then creates an input box. this bit works fine. it is the next bit i'm having trouble with. i want also for an <a> tag to be created which, if clicked, removes the text element, input element and the <a> element created.

    to make a start i tried to create an <a> element that just leads to an external website which is what i have tried to do in the script above. nothing comes up. i think this may be because what i have above will create <a href = "http://www.sitepoint.com"></a> and there needs to be some text before the </a>tag. i may be wrong, i dont know much about javascript but i think that would make sense.

    hope this makes sense and i hope someone can help me out
    thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You create an empty anchor element which will be 0px wide, so there's nothing to click. Add some content to the link to make it visible:

    Code:
    var strText = 'http://www.sitepoint.com';
    objLink = document.createElement('A');
    objLink.setAttribute('HREF', 'strText');
    objLink.appendChild(document.createTextNode(strText));
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help! i moved on to the next bit of removing the elements. i have the following code:
    Code:
    	<script language="JavaScript">
    
    		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');
    			objHTML.setAttribute('ID', 'txtTest');
       
    			var strTest = form.ingredienttoadd.value;
      			objText = document.createTextNode(strTest);
    
    
    			var strOnClick = 'Test();';
    			objLink = document.createElement('A');
    			objLink.setAttribute('HREF', 'http://www.sitepoint.com');
    			objLink.setAttribute('onclick', strOnClick);
    			objLink.appendChild(document.createTextNode('Delete This'));
    
    			objinput = document.createElement
    ('INPUT');		
    			objinput.setAttribute('TYPE', 'text');
    			objinput.setAttribute('NAME', 'input'+it);
    
    			form.appendChild(objHTML);		
    			objHTML.appendChild(objText);
    			objHTML.appendChild(objinput);
    			objHTML.appendChild(objLink);
    		
    		}
    
    		function Test
    ()
    		{
    
    			document.write('Wahey');
    		}
    so ive now got the behaviour i want for the click of the link - it calls another function (at the moment a pointless one but ill write what i want it to do later!) only problem is, it also goes to sitepoint.com. is there a way i can make the link reload the page. i know you can do it in php. bear in that if i have 3 elements and i delete one using this method. when the page reloads i still want the other 2 elements to be there!
    thanks!

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't use setAttribute() to assign event listeners. Try something like this:
    Code:
    if (objLink.addEventListener) {
        /* for DOM2-compliant browsers */
        objLink.addEventListener("click", Test, false);
    } else if (objLink.attachEvent) {
        /* for IE */
        objLink.attachEvent("onclick", Test);
    } else {
        objLink.onclick = Test;
    }
    This is really more complicated than necessary. In this case you could just do objLink.onclick=Test; and be done with it.

    This is how you can prevent the link from being followed when it's clicked:
    Code:
    function Test(e)
    {
        document.write('Wahey');
        if (e) {
            /* for DOM2-compliant browsers */
            e.preventDefault();
        } else if (window.event) {
            /* for IE */
            window.event.returnValue = false;
        } else {
            return false;
        }
    }
    Birnam wood is come to Dunsinane


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
  •