SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question about how to apply an onclick event inside javascript

    I am making a form where the user can upload more than one file at once, using javascript i dynamically add form elements. This works fine, however i want the ability to remove an input if it won't be used (kind of like how gmail does it).

    So what i did was i made it so that each input (label + input + remove link)
    would be inside a div that was uniquely identified using a global variable that holds the count for the total items + a prefix. Now to remove the node, i could just remove that whole div getting the id and then calling removeNode(true). However i can't figure out how to put an onclick event on the link within the javascript.. how do you do that?

    here is my code that creates the remove link (however it doesnt work)
    Code:
    /* This method appends a remove link to obj. the divid contains the id
     * of the node that clicking the link that this method creates, will remove.
     */
    function appendRemove(obj, divid) {
    		newelm = document.createElement("a");
    		newelm.href="javascript:void(0)";
    		newelm.onclick = "removeInput(" + divid + ")";
    		newelm.innerText = "Remove";
    		rem = document.createTextNode("Remove");
    		newelm.appendChild(rem);		
    		obj.appendChild(newelm);		
    	}
    the remove link shows up correctly but
    the removeInput method does not get called when i click on the link.
    no idea how to add that attribute correctly..
    any ideas?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The usual way to do that is:
    Code:
    thing.onclick = someFunction;
    ...
    function someFunction() {
    //do stuff
    }
    or
    Code:
    thing.onclick = function() {
      someFunction(params);
    };
    However neither of those will work in your case, because the variable you are passing will keep changing, and clicking the link causes the variable to be read at the time the link is clicked and not when you create the div. So what you need is:
    Code:
    thing.onclick = new Function("removeDiv(" + divId + ");return false;");
    OK having said that, lets assume that the a tag is a direct child of the div you're adding. We can skip the IDs altogether, by passing a reference to the A tag to the remove function, and getting the parentnode.
    Code:
    thing.onclick = function() {
    	removeInput(this);
    	return false;
    }
    ...
    function removeInput(clickedAnchor) {
    	var divToRemove = clickedAnchor.parentNode;
    	divToRemove.parentNode.removeChild(divToRemove);
    }
    Hope that helps a bit.

    PS the return false from the onclick function is so the href doesn't get processed, in your case it's void() so it doesnt matter.

  3. #3
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey jim thanks so much, that worked perfectly, great explanation as well.


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
  •