dynamische anonyme js Funktion funktioniert nicht

Question

Mein Problem ist, dass ich eine Zeile zu einer HTML-Tabelle dynamisch mit Javascript {Aufruf der Funktion addInputCompField()} hinzufügen. Die Zeile hat 2 Zellen - die erste ist nur ein Text und die zweite ist ein IMG-Attribut. Das Problem ist mit dem Attribut img, in dem ich auch eine onClick js-Funktion hinzufüge, die aufgerufen würde, um die Zeile wieder zu löschen, wenn der Benutzer auf das Bild klickt. Die onClcik js-Funktion wird nicht wie erwartet ausgewertet. Hier

ist der HTML-Code: -

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

</span> 

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

und hier ist die 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();      
} 

Sowohl die HTML und Javascript sind in der gleichen Datei. Alles funktioniert, außer wenn ich versuche, auf die zweite Zelle mit dem Bild zu klicken, um die Zeile zu entfernen. Ich erhalte dann einen Browser-Fehler wie die folgenden: -

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

ich, damit der Benutzer müssen in der Lage sein die Zeile sie mit dieser Aktion OnClick hinzugefügt haben, nur zu entfernen. Es ist, als wenn die JavaScipt nicht ausgewertet wird, wenn ich Firebug verwenden, was in dem Bild zu sehen, das ist, was ich sehe: -

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

ich erwartet hatte nicht rand_nr dort, sondern ein berechneter Wert zu sehen. Irgendwelche Ideen, wie ich das beheben kann? - Es muss sowohl auf Firefox als auch auf IE funktionieren. Das macht mich verrückt!

Answer 1

Sie setzen die "onclick" -Funktion falsch. Versuchen Sie, nur dies zu tun:

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

Was Sie hatte:

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

Sets "Onclick" auf eine Funktion, die nicht wirklich überhaupt nichts zu tun hat.

bearbeiten — auch sollten Sie wahrscheinlich Zeilennummern auf diese Weise nicht generieren. Verwenden Sie einfach einen Zähler, keine Zufallszahl. (Sie können nicht sicher sein, dass der Zufallsgenerator Ihnen kein Duplikat gibt!)

Answer 2

Sie führen Ihre 'myOnClick'-Funktion nicht aus.

Sie können die Funktion ausführen: newImg.onclick = function(){myOnClick();};
Oder Sie können die Prozedur mit der Funktion zugeordnet werden direkt: newImg.onclick = myOnClick;