PDA

Click to See Complete Forum and Search --> : adding onclick event

Mat
08-06-2003, 03:08 PM
I'm trying to add an onclick attribute to an input tag I've just created using the DOM.

I know that regular attributes are done in the following way:

object.setAttribute("attribute_to_set", "value");

and that styles are set this way:

object.style.style_to_set = "value";

But I'm not sure what heading events fall under. I'd like to create a button with an onclick event, and I'm just not sure how.

Thanks for any help,


Mat
Charles
08-06-2003, 03:53 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<script type="text/javascript">
<!--
onload = function () {
body = document.getElementsByTagName('body')[0];
button = document.createElement('button');
button.onclick = function () {alert('Button')};
body.replaceChild(button, body.firstChild);
}
// -->
</script>
<body>&nbsp;</body>
Mat
08-06-2003, 04:13 PM
To start, thanks for the help so far. I think I can see the direction I should go, but unforunately I'm a little unsure of a couple things.

1) Is the function name supposed to be empty?

2) I'm also not sure how to integrate that with the button I'm creating later.

Here's the code I'm in the middle of:

var buttonobj = document.createElement("input");
buttonobj.setAttribute("type", "button");
goalstring = "addnew1";
buttonobj.setAttribute("name", goalstring);
buttonobj.setAttribute("id", goalstring);
buttonobj.setAttribute("value", "Add New");
buttonobj.style.fontSize = "16px";
buttonobj.style.fontFamily = "Arial, Helvetica, sans-serif";
document.getElementById("goal").appendChild(buttonobj);

from yours, I would take that I could use buttonobj.onclick = "addnew()", but unfortunately that doesn't seem to work.

I'm not exactly sure what's going on with the OnLoad bit too, is that when the page loads, or the button? Because if its the page, then its too early, because I need to wait for the user to call the given function that creates it.

I'm also not sure what button in your example is replacing.

Anyway, I'm still a bit new at this dom stuff, so unfortunately I need the clarification.

Thanks again,


Mat
Mat
08-06-2003, 06:12 PM
I've been trying to figure out how to get that replacechild method to work, but it doesn't seem to want to, no matter what I do. Any other suggestions, or a little more clarity on the specifics of how I should use it?
Khalid Ali
08-06-2003, 06:45 PM
The proper DOM specific way of adding event to any html element will be as follows.

var el = document.createElement("input");

el.addEventListener('eventType',handlerName,false);

The above works in DOM compliant browsers
E.G
eventType="CLICK"
handlerName = myFunc

Below is the IE specific method

el.attachEvent('eventType',handler);

eventType="onclick"
handler=myFunc

Hope this helps
Mat
08-07-2003, 02:17 AM
Originally posted by Khalid Ali
The proper DOM specific way of adding event to any html element will be as follows.

var el = document.createElement("input");

el.addEventListener('eventType',handlerName,false);

The above works in DOM compliant browsers
E.G
eventType="CLICK"
handlerName = myFunc

Below is the IE specific method

el.attachEvent('eventType',handler);

eventType="onclick"
handler=myFunc

Hope this helps

I'm still having trouble with this snippet of code, so given the example above, I'm going to ask specific quetsions:

(this is the stuff that I think is making my code not work)

1-does 'eventType' need to have single quotes? If its a variable (containing "onclick" or "CLICK"), doesn't it need to not have quotes?

2-For the handler/handlerNam=myFunc, does this need to also have the paranthesis as its likely a function? If this is also setting a variable, should it be = "myFunc()"?

3-In the generic addEventListener, what is the "false" statement doing? I'm just curious.

Thanks again,


Mat
Charles
08-07-2003, 05:36 AM
Originally posted by Mat
To start, thanks for the help so far. I think I can see the direction I should go, but unforunately I'm a little unsure of a couple things.

1) Is the function name supposed to be empty?

2) I'm also not sure how to integrate that with the button I'm creating later.

Here's the code I'm in the middle of:

var buttonobj = document.createElement("input");
buttonobj.setAttribute("type", "button");
goalstring = "addnew1";
buttonobj.setAttribute("name", goalstring);
buttonobj.setAttribute("id", goalstring);
buttonobj.setAttribute("value", "Add New");
buttonobj.style.fontSize = "16px";
buttonobj.style.fontFamily = "Arial, Helvetica, sans-serif";
document.getElementById("goal").appendChild(buttonobj);

from yours, I would take that I could use buttonobj.onclick = "addnew()", but unfortunately that doesn't seem to work.

I'm not exactly sure what's going on with the OnLoad bit too, is that when the page loads, or the button? Because if its the page, then its too early, because I need to wait for the user to call the given function that creates it.

I'm also not sure what button in your example is replacing.

Anyway, I'm still a bit new at this dom stuff, so unfortunately I need the clarification.

Thanks again,


Mat 1) I've employed what is called an "anonymous function". They are quite useful for making object methods, which is what you are trying to do.

2) It should be pretty darn simple to figure out. Try

var buttonobj = document.createElement("input");
buttonobj.setAttribute("type", "button");
goalstring = "addnew1";
buttonobj.setAttribute("name", goalstring);
buttonobj.setAttribute("id", goalstring);
buttonobj.setAttribute("value", "Add New");
buttonobj.style.fontSize = "16px";
buttonobj.style.fontFamily = "Arial, Helvetica, sans-serif";
buttonobj.onclick = function () {alert()};
document.getElementById("goal").appendChild(buttonobj);

Simply replace "alert()" with whatever "addnew()" does. Alternatively you could use buttonobj.onclick = function () {addnew()} or buttonobj.onclick = addnew.

3) I used the "onload" handler for the page because I wanted the script to run after the page has been loaded and once the BODY element existed.

4) The W3C DOM allows for several ways of doing things, my way is just as valid as that which has been demonstrated by Khalid and perhaps a bit easier to use.
Khalid Ali
08-07-2003, 10:35 AM
Here is the solution.To understand it thoroughly you might want to read about

addEventListener at w3c dom specs (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-addEventListener)

Solution is at the link below

http://68.145.35.86/skills/javascripts/AddEventToDynamicallyCreatedElement.html

Let me know if you needed some more details about any item..
Mat
08-07-2003, 01:59 PM
Thanks you to both of you, I finally figured it out.