Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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.

Reply With Quote
  #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
Reply With Quote
  #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 ;)
Reply With Quote
  #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.

Reply With Quote
  #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

Reply With Quote
  #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.




Reply With Quote
  #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


Reply With Quote
  #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>
Reply With Quote
  #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.

Reply With Quote
  #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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 04:39 AM.


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