Adding onClick to javascript function

Question

I have a javascript function that adds table rows when a button is clicked.

when adding rows, in one of the cells it uses:

var linkCell = row.insertCell(1);
var elLink = document.createElement('a');
var href='http://www.domain.co.uk/';
elLink.href = href;
elLink.innerHTML = 'Choose Product '+i;
linkCell.appendChild(elLink);

to add a HTML a href to each row but I want to be able to used onClick rather than a href

I have tried:

var linkCell = row.insertCell(1);
var elLink = document.createElement('a');
var href='javascript:void(0);';
var onClick=window.open('/admin/chooseproduct.php?c='+i,'Popup','width=550,height=500,left=150,top=200,toolbar=1,status=1,');
elLink.href = href;
elLink.innerHTML = 'Choose Product '+i;
linkCell.appendChild(elLink);

but that does not open the popup window as it should - how can I do this?

Answer 1

Two problems:

First, you are not every applying the onclick method to the element: you are only defining it as a variable.

var onClick = ...     // won't work
elLink.onclick = ...  // will work

Second, you are not creating an onclick handler with the code you're writing. onClick = window.open(...) doesn't say "open a window when the element is clicked". Rather it says "open a window right now, and set onClick to be a reference to that window".

You need to create a new function. This function will be assigned as the event handler and only executed when the link is clicked. It will itself call window.open.

elLink.onclick = function() {
    window.open('/admin/chooseproduct.php?c='+i,'Popup','width=550,height=500,left=150,top=200,toolbar=1,status=1,');
};