Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old October 20th, 2004, 12:36 PM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default onClick event not working !!!

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.

  #2 (permalink)  
Old October 20th, 2004, 04:20 PM
Authorized User
 
Join Date: Jun 2003
Location: Sheridan, OR, USA.
Posts: 53
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Just a guess, but does the

deleteItem()

in

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

need to be in double-quotes?

JK
  #3 (permalink)  
Old October 20th, 2004, 04:26 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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 ;)
  #4 (permalink)  
Old October 21st, 2004, 03:30 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

  #5 (permalink)  
Old October 21st, 2004, 03:52 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

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

  #6 (permalink)  
Old October 21st, 2004, 09:49 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.




  #7 (permalink)  
Old October 21st, 2004, 11:05 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

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


  #8 (permalink)  
Old October 21st, 2004, 08:44 PM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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>
  #9 (permalink)  
Old October 21st, 2004, 09:13 PM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

  #10 (permalink)  
Old October 22nd, 2004, 12:55 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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




Similar Threads
Thread Thread Starter Forum Replies Last Post
Generate onclick event collie Javascript 4 May 27th, 2008 09:22 AM
onclick event bjackman Access 6 July 15th, 2004 06:54 AM
onclick event pigtail Javascript 1 April 11th, 2004 03:10 PM
onClick Event mateenmohd Javascript 4 December 16th, 2003 01:08 AM
onclick event not working? mumps Javascript 2 September 15th, 2003 10:09 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.