onClick event not working !!!

muklee · October 20th, 2004, 12:36 PM

I use a onChange() event to create a <img> html tag after select something from a dropdown menu. This is done by using the document.createElement() method. I also use the setAttribute() method to create a onClick() event.

The onClick() event should be fired after I click on the newly create image. However, the event fires together with the onChange() event. And when I click on the image, nothing was happened. An alert message should pop up after I click on the image.

Please have a look at the code attached.

Code:

<script language="javascript" type="text/javascript">

function addFav(obj) {
  var img = document.createElement("img");
  img.setAttribute("alt", "delete");
  img.setAttribute("id", "del");
  img.setAttribute("src", "graphics/ico-delete.gif");
  img.setAttribute("onClick", deleteItem());
}

function deleteItem() {
  alert("Remove Item");
}
</script>


<select name="student" size="5" style="width:100%;" onChange="addFav(this)">
<option value="001">May</option>
<option value="002">Peter</option>
<option value="003">John</option>
<option value="004">Mary</option>
<option value="005">Susan</option>
</select>

I have no idea what is going wrong. And I really need some help from yours. Thanks in advance.

John K. King · October 20th, 2004, 04:20 PM

Just a guess, but does the

deleteItem()

in

img.setAttribute("onClick", deleteItem());

need to be in double-quotes?

JK

Snib · October 20th, 2004, 04:26 PM

Or maybe try:

img.setAttribute("onClick", function(){deleteItem()});

-Snib <><
Try new FreshView 0.2!
There are only two stupid questions: the one you don't ask, and the one you ask more than once ;)

muklee · October 21st, 2004, 03:30 AM

Sorry for my late reply. I have try both methods but still, it is not working.
As I mentioned previously, if I put:

Code:

img.setAttribute("onClick", deleteItem());

I will get the popup message but it fired when I select a item in a select list; not when I click on the image.

Anyway, thanks for reply. Hope to get more help.

ChrisScott · October 21st, 2004, 03:52 AM

Hello muklee,

Code:

img.setAttribute("onclick", "deleteItem()");

will work fine in Mozilla, but to get this to work in IE you may have to use

Code:

img.onclick = deleteItem;

HTH,

Chris

muklee · October 21st, 2004, 09:49 AM

No, it still not working. I try to use the code :

Code:

img.onclick = deleteItem;

AND

Code:

img.onclick = deleteItem();

I get different results. For the first instance (without bracket), no alert message being shown when I click on the image. While for second instance, the alert message fired when I select a value in my drop-down list.

The logic should be after select a value from drop-down menu, a image will be created at run-time. And when I click on the image, an alert message will popup.

Even I still can't figure out how to do it, I fell happy to see reply from your guys. Thanks a lot and hope to get more and more feedbacks.

ChrisScott · October 21st, 2004, 11:05 AM

Hey muklee,

The following works for me in IE & Mozilla...

Code:

<html>

<head>
<title></title>

<script language="javascript" type="text/javascript">

function addFav(obj) {
  var img = document.createElement("img");
  img.setAttribute("alt", "delete");
  img.setAttribute("id", "del");
  img.setAttribute("src", "graphics/ico-delete.gif");
  //img.setAttribute("onClick", "deleteItem()");
  img.onclick = deleteItem;

  document.body.appendChild(img);
}
function deleteItem() {
  alert("Remove Item");
}
</script>

</head>

<body>

<select name="student" size="5" style="width:100%;" onChange="addFav(this)">
<option value="001">May</option>
<option value="002">Peter</option>
<option value="003">John</option>
<option value="004">Mary</option>
<option value="005">Susan</option>
</select>

</body>

</html>

HTH,

Chris

muklee · October 21st, 2004, 08:44 PM

It finally worked. But I have another problem. I try to modify the code to place the image into a table. This time, the code is not working.

Code:

<html>

<head>
<title></title>

<script language="javascript" type="text/javascript">

function addFav(obj) {
  var tbl = document.getElementById("favTable"); // Get table object
  var lastRow = tbl.rows.length;  // Return 1 because of the title
  var row = tbl.insertRow(lastRow);
  var imgCell = row.insertCell(0);
  var img = document.createElement("img");

  img.setAttribute("alt", "delete");
  img.setAttribute("id", "del");
  img.setAttribute("src", "graphics/ico-delete.gif");
  img.onclick = deleteItem;
  imgCell.appendChild(img);
}

function deleteItem() {
  alert("Remove Item");
}

</script>

</head>

<body>
<form>

<table>
   <tr>
      <td>
         <select name="student" size="5" style="width:100%;" onChange="addFav(this)">
            <option value="001">May</option>
            <option value="002">Peter</option>
            <option value="003">John</option>
            <option value="004">Mary</option>
            <option value="005">Susan</option>
         </select>
      </td>
   <tr>
      <td><table id="favTable">
         <tr>
            <td>Image</td>
         </tr>

      </table></td>
   </tr>
</tr>
</table>
</form>
</body>

</html>

muklee · October 21st, 2004, 09:13 PM

Sorry, the code :

Code:

img.onclick = deleteItem;

is doing well. But, when I change to :

Code:

img.onClick = deleteItem;

the mouse click event is not fired. What's the different between the two?

I am using Micromedia Dreamweaver MX. As I know, when I put a click event in a particular html control, both the "onclick" and "onClick" events is valid (is working). That's way I use "img.onClick = deleteItem" in first case.

Thanks in advanced.

joefawcett · October 22nd, 2004, 12:55 AM

HTML attributes are not case sensitive so within tags onClick = onclick.
The JavaScript language is case sensitive and all events are lowercase throughout, I'm not sure why as other attributes follow the more standard camel casing, e.g. maxLength for text inputs.

--

Joe