onClick not working

[yssirhc]

This code adds & removes textboxes from the screen. In the remove function, it also renames any textboxes that come after the one deleted so that the numbering stays in order (i.e. 1,2,3,4 instead of 1,2,4,5,8) and updates the count parameter of the textbox's corresponding remove link so that the textbox's name (i.e. file3) matches its count parameter.

This is the line of code that appears to be causing me a problem: document.getElementById('removeLink' + nextFile).onclick = "removeAdditionalFile(this.parentNode, ' + count + ')"; in the while loop of the removeAdditionalFile function. Basically, the textbox doesn't get deleted like it should when you click on the link. My guess would be because "this.parentNode" isn't pointing to the right thing, but I don't understand why it's not. Anybody know how to fix this?

I had been fooling around for awhile with updating the entire innerHTML instead of just the onclick (in the while loop of the remove function), and it was kind of working but not quite and it was much more complicated, so if I could just get the onclick changed correctly, that'd be great.

function addFileTextbox()                                             
{
     //main div that the other divs will be added to
     var divLocation = document.getElementById('addToDiv');                             

     //create new div for holding textboxes, & give it a unique name for uploading
     var newDiv = document.createElement('div');                                         
     var count = document.getElementById('addToDiv').getElementsByTagName('input').length + 2;  //+2 because since it hasn't been appended yet, the length will be short one. We need this number to set the unique div name.
     var divIDName = 'file' + count;
     var removeLinkID = 'removeLink' + count;
     newDiv.innerHTML = '<input type="file" name="' + divIDName + '" id="' + divIDName + '" size="57"> <a href="#" id="' + removeLinkID + '" onclick="removeAdditionalFile(this.parentNode, ' + count + ')">Remove</a>';   //THIS WORKS FINE

     //Attach new div to main div location
     divLocation.appendChild(newDiv);                                                      

     //Increase the count of files to be uploaded (+1 for the file textbox already there)
     var fileCount = document.getElementById('addToDiv').getElementsByTagName('input').length + 1;
     document.getElementById('fileCount').value = fileCount;                             
}

function removeAdditionalFile(divIDNode, count)                                       
{
     //get main div that the other divs are attached to                                   
     var divLocation = document.getElementById('addToDiv');                             

     //delete the file textbox
     divLocation.removeChild(divIDNode);                                                 

     //Decrease the count of files to be uploaded (+1 for the permanent file textbox)
     var fileCount = document.getElementById('addToDiv').getElementsByTagName('input').length + 1;
     document.getElementById('fileCount').value = fileCount;                            

     //rename file textboxes that come after the one deleted so that they get uploaded
     var nextFile = count + 1;
     while (document.getElementById('file' + nextFile))  //there are file textboxes after the one deleted
     {
        //rename the file textbox to be one less & change the count parameter of the remove link
        document.getElementById('file' + nextFile).name = "file" + count;
        document.getElementById('removeLink' + nextFile).onclick = "removeAdditionalFile(this.parentNode, ' + count + ')";   //THIS DOESN'T WORK

        nextFile++;
        count++;  //will always be one less than nextFile                                  
     }
}

[ejosiah]

This is a problem novice Javascript programmers face; I'll explain your problem below:

when this line document.getElementById('removeLink' + nextFile).onclick = "removeAdditionalFile(this.parentNode, ' + count + ')"; runs what happens is that removeAdditionalFile is executed and its return value is assigned to onclick; in your case onclick is assigned to void which is nothing.

The solution to this is to assign onclick to a new function that when called will execute removeAdditionalFile; see below:

document.getElementById('removeLink' + nextFile).onclick = function(){
   removeAdditionalFile(this.parentNode, ' + count + ');
}

have fun

[ejosiah]

Looking at your code again you have one more problem you are assign onclick to a string but removing this will not solve your problem the above solution is your answer.

if you still have problems after making ur changes post your full html code in here and I'll help u fix it

[yssirhc]

That did fix the onclick :) thanks!

however, there appears to be something else wrong with my remove function also. If I have 4 files listed and delete the 2nd one:
file1
file2 X
file3
file4

I'm getting file1, nothing, file3 uploaded. Somehow, file3 & file4 are not getting renamed to file2 & file3.

function addFileTextbox()
{
  var divLocation = document.getElementById('addToDiv');
  var newDiv = document.createElement('div');
  var count = document.getElementById('addToDiv').getElementsByTagName('input').length + 2;
  var divIDName = 'file' + count;
  var removeLinkID = 'removeLink' + count;
  newDiv.innerHTML = '<input type="file" name="' + divIDName + '" id="' + divIDName + '" size="57"> <a href="#" id="' + removeLinkID + '" onclick="removeAdditionalFile(this.parentNode, ' + count + ')">Remove</a>';
  divLocation.appendChild(newDiv);
  var fileCount = document.getElementById('addToDiv').getElementsByTagName('input').length + 1;
     document.getElementById('fileCount').value = fileCount;
}

function removeAdditionalFile(divIDNode, count)
{
  var divLocation = document.getElementById('addToDiv');
  divLocation.removeChild(divIDNode);

  var fileCount = document.getElementById('addToDiv').getElementsByTagName('input').length + 1;
     document.getElementById('fileCount').value = fileCount;

  var nextFile = count + 1;
  while (document.getElementById('file' + nextFile))  //there are file textboxes after the one deleted
{
  //rename the file textbox, its ID, & the remove link's ID to be one less & change the count parameter of the remove link
  document.getElementById('file' + nextFile).name = "file" + count;
  document.getElementById('file' + nextFile).id = "file" + count;
  document.getElementById('removeLink' + nextFile).onclick = function()
  {
    removeAdditionalFile(this.parentNode, ' + count + ');
  }
  document.getElementById('removeLink' + nextFile).id = "removeLink" + count;

  nextFile++;
  count++;
}

Click Browse to select a file on your computer, or type its path in the box below.<br />To upload multiple files at once, click Add.<br />
  <div align="center">
    <input type="button" name="add" value="Add Another File" onclick="addFileTextbox();">
    <form method="POST" name="fileForm" enctype="multipart/form-data" action="repos.exe">
      <input type="hidden" name="proc" value="fileupload">
      File(s): <input type="file" size="66" name="file1" id="file1">
      <input type="hidden" name="fileCount" id="fileCount" value="1">
      <div id="addToDiv"></div>  <!-- additional file textboxes will be added here -->
       Description: (optional) <br /><textarea name="DESC" rows="5" cols="61" wrap="PHYSICAL"></textarea><br />
      <input type="submit" name="submit" value="Upload">
    </form>
  </body>
</html>

[yssirhc]

Does anyone know why the input names are not getting changed in the removeAdditionalFile function?

[yssirhc]

Actually, I'm not sure if that is exactly the problem. Because I can use the remove link fine ONCE before uploading. The problem occurs when I use it TWICE before uploading.

Can anyone tell what's wrong with my remove function?