dynamic anonymous js function not working

My problem is that I am adding a row to a HTML table dynamically using Javascript {calling the function addInputCompField() }. The row has 2 cells - the first is just some text and the second is an img attribute. The problem is with the img attribute in which I am also adding an onClick js function which would be called to allow the row to be deleted again when the user clicks on the image. The onClcik js function isn't being evaluated as I'd expected.

Here is the html code:-

<span class="button-gray">
    <input type="button" name="" onclick="addInputCompField();"
id="Components_Button1" value="Add a Component">           

</span>

<table id="compTableId">       
</table>

and here is the javscript

function addInputCompField() {
    var table = document.getElementById('compTableId');
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);           
    var cell1 = row.insertCell(0);
    var newInput = document.createElement('input');
    newInput.type = "text";
    var rand_nr = Math.random();
    rand_nr = rand_nr * 100;
    rand_nr = Math.ceil(rand_nr);
    row.setAttribute('id','tr'+rand_nr);

    newInput.setAttribute('name', 'Comp-New'+rand_nr);
    newInput.setAttribute('size', '45');             
    cell1.appendChild(newInput);

    var cell2 = row.insertCell(1);           
    var newImg = document.createElement('img');
    newImg.setAttribute('src', '/img/remove_icon.png');
    newImg.height='16';
    newImg.width='16';

    var myOnClick = function() {removeCompField('tr'+rand_nr);};           
    newImg.onclick = function (){myOnClick;};

    cell2.appendChild(newImg);

    newInput.focus();                       
}

Both the HTML and the Javascript are in the same file. All works ok except when I try to click on the second cell with the image to remove the row. I then get a browser error such as the following:-

Error: syntax error
Source File:
http://localhost....
Line: 1, Column: 9
Source Code:
function () { 

I do need to be able to allow the user to remove the row they have just added by having this onClick action. Its as though the javascipt isn't being evaluated When I use firebug to see whats in the image, this is what I see:-

<img height="16" width="16" 
src="/img/remove_icon.png" onclick="function () {
    removeCompField(&quot;tr&quot; + rand_nr);
}">

I had expected not to see rand_nr there but instead a computed value. Any ideas on how I can fix this? - it n开发者_如何学JAVAeeds to work on both Firefox and IE. This driving me nuts!

You are not executing your 'myOnClick' function.

You can execute the function: newImg.onclick = function (){myOnClick();};
Or you can associate the handler with the function directly: newImg.onclick = myOnClick;

You're setting the "onclick" function incorrectly. Try just doing this:

newImg.onclick = function() {removeCompField('tr'+rand_nr);};

What you had:

  var myOnClick = function() {removeCompField('tr'+rand_nr);};           
  newImg.onclick = function (){myOnClick;};

sets "onclick" to a function that doesn't really do anything at all.

edit — also you should probably not generate row numbers that way. Just use a counter, not a random number. (You can't be sure that the random number generator won't give you a duplicate!)