динамическая анонимная функция js не работает

Question

Моя проблема заключается в том, что я динамически добавляю строку в таблицу HTML, используя Javascript {, вызывающий функцию addInputCompField()}. Строка содержит 2 ячейки - первая - это всего лишь текст, а второй - атрибут img. Проблема заключается в атрибуте img, в котором я также добавляю функцию onClick js, которая вызывается, чтобы позволить удалять строку снова, когда пользователь нажимает на изображение. Функция onClcik js не оценивается так, как я ожидал.

Вот HTML-код: -

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

</span> 

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

и вот 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();      
} 

Оба HTML и Javascript в том же файле. Все работает нормально, за исключением случаев, когда я пытаюсь щелкнуть по второй ячейке с изображением, чтобы удалить строку. Затем я получаю ошибку браузера, такие как: -

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

мне нужно, чтобы быть в состоянии позволить пользователю удалить строку они только что добавили, имея это действие OnClick. Ее как будто Javascipt не оценивается Когда я использую поджигатель для того чтобы увидеть в образе, это то, что я вижу: -

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

я ожидал, чтобы не видеть rand_nr там, но вместо того, чтобы вычисленное значение. Любые идеи о том, как я могу это исправить? - он должен работать как с Firefox, так и с IE. Это сводит меня с ума!

Answer 1

Вы неправильно настроили функцию onclick. Попробуйте просто сделать это:

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

Что вы имели:

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

наборы «OnClick» на функцию, которая на самом деле не делать вообще ничего.

— также вы, вероятно, не должны генерировать номера строк таким образом. Просто используйте счетчик, а не случайное число. (Вы не можете быть уверены, что генератор случайных чисел не даст вам дубликат!)

Answer 2

Вы не выполняете функцию myOnClick.

Вы можете выполнить функцию: newImg.onclick = function(){myOnClick();};
Или вы можете связать обработчик с функцией непосредственно: newImg.onclick = myOnClick;