Subject: onClick event not working !!!
Posted By: muklee Post Date: 10/20/2004 12:36:07 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.



<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.
Reply By: John K. King Reply Date: 10/20/2004 4:20:03 PM
Just a guess, but does the

deleteItem()

in

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

need to be in double-quotes?

JK
Reply By: Snib Reply Date: 10/20/2004 4:26:43 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 ;-)
Reply By: muklee Reply Date: 10/21/2004 3:30:42 AM
Sorry for my late reply. I have try both methods but still, it is not working.
As I mentioned previously, if I put:



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.
Reply By: ChrisScott Reply Date: 10/21/2004 3:52:18 AM
Hello muklee,

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

will work fine in Mozilla, but to get this to work in IE you may have to use
img.onclick = deleteItem;


HTH,

Chris
Reply By: muklee Reply Date: 10/21/2004 9:49:53 AM
No, it still not working. I try to use the code :


img.onclick = deleteItem;


    AND


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.
Reply By: ChrisScott Reply Date: 10/21/2004 11:05:35 AM
Hey muklee,

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

<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
Reply By: muklee Reply Date: 10/21/2004 8:44:49 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.



<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>
         <!-- New row created here with a "img" html control -->
      </table></td>
   </tr>
</tr>
</table>
</form>
</body>

</html>


Reply By: muklee Reply Date: 10/21/2004 9:13:19 PM
Sorry, the code :


img.onclick = deleteItem;


is doing well. But, when I change to :


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.
Reply By: joefawcett Reply Date: 10/22/2004 12:55:56 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
Reply By: muklee Reply Date: 10/22/2004 1:39:43 AM
I have try doing something like :

img.onclick = deleteItem("Delete");

so that, the function "deleteItem" will receive a parameter. But I get a javascript error message : obect require. So, is ut means that we cannot pass in any parameter(s) to the function "deleteItem".

Thanks a lot, guys.
Reply By: ChrisScott Reply Date: 10/22/2004 2:23:17 AM
Hello muklee,

You could use
img.onclick = function(){deleteItem("Delete");};

or 
img.onclick = new Function("deleteItem('Delete');");

HTH,

Chris
Reply By: muklee Reply Date: 10/22/2004 2:35:01 AM
Excellent, finally the page is working well.
Thank you so much to all you, thanks.
Reply By: pecal Reply Date: 6/4/2008 3:46:04 AM
hello muklee
i meet the same problem,i try as ChrisScott said,i use the method

img.onclick = function(){deleteItem("Delete");};
and
img.onclick = new Function("deleteItem('Delete');");
but it does not work
My code:
function parseSubTree(id){
var el= document.getElementById(id);
var images = el.getElementsByTagName("IMG");
images[0].onClick=function(){showHide(id);};
}
i can't solve it ,hope to get some hlep from you
Reply By: vinod_yadav1919 Reply Date: 6/4/2008 4:08:20 PM
Hi All !!
There is solution and observations on this..
http://p2p.wrox.com/topic.asp?TOPIC_ID=71868

Cheers :)

vinod

Go to topic 71884

Return to index page 1