Appending Events

[dunerunner]

Hi,

I have a situation where I have a button with an onclick event
containing a function and I need to append a function to that event.

For example, I have:

<button id="btn" onclick="func1(param);">The Button</button>

When the user clicks another button, I want to essentially have the
button above look like:

<button id="btn" onclick="func1(param);func2(param);">The Button</
button>

Is this possible? If so, can I get some guidance, please?


Thanks,

Tim

 

[Ugo]

I have a situation where I have a button with an onclick event

containing a function and I need to append a function to that event.

For example, I have:

<button id="btn" onclick="func1(param);">The Button</button>

When the user clicks another button, I want to essentially have the
button above look like:

<button id="btn" onclick="func1(param);func2(param);">The Button</
button>

Is this possible?

Yes

e.g.

<button id="btn2" onclick="document.getElementById('btn').onclick =
function(){ func1(param);func2(param); }">change</button>

 

[dunerunner]

Thank you for your quick and informative answer. However, I failed to
mention a very important piece of the puzzle. The button to which I
need to add the new event is going to be created in the same onclick
event. I'm finding out in that case, javascript doesn't even
recognize the new component until the page refreshes. So, I can't do
this without changing the function that adds the button, which I'm not
allowed to do.

Oh well, I'll continue banging away at it.

 

[Ugo]

I have a situation where I have a button with an onclick event

Thank you for your quick and informative answer. However, I failed to
mention a very important piece of the puzzle. The button to which I
need to add the new event is going to be created in the same onclick
event. I'm finding out in that case, javascript doesn't even
recognize the new component until the page refreshes. So, I can't do
this without changing the function that adds the button, which I'm not
allowed to do.

Oh well, I'll continue banging away at it.

look if I understand...

you have a button so:
<button id="btn" onclick="func1(param);">The Button</button>
and you want it becomes so:
<button id="btn" onclick="func1(param);func2(param);">The Button</button>
after first click, is it right?

if so, and if you may append a function firstly:
<button id="btn" onclick="func1(param);changeEvent(this)">
The Button</button>

function changeEvent(elem)
{
elem.onclick = function()
{
func1(param);func2(param);
}
}

 

[dunerunner]

look if I understand...

you have a button so:
<button id="btn" onclick="func1(param);">The Button</button>
and you want it becomes so:
<button id="btn" onclick="func1(param);func2(param);">The Button</button>
after first click, is it right?

Sorry, that's not right.

What I have to begin with is button A only.
User clicks button A.
In the onclick event for button A I have a function that creates
button B. The function that creates button B attaches an onclick
event to button B. After button B is created (while still in the
onclick event handler) I need to add another function to button B's
onclick event.

Sorry if this isn't clear, but it's a strange requirement.

Thanks for trying to help.

 

[Ugo]

[cut]

Sorry, that's not right.

What I have to begin with is button A only.
User clicks button A.
In the onclick event for button A I have a function that creates
button B. The function that creates button B attaches an onclick
event to button B. After button B is created (while still in the
onclick event handler) I need to add another function to button B's
onclick event.

ok, maybe I'm close to understand
do you know create a new button? (You can think of creating hidden and
showing on event)
make me see how you could make it...

Then, if I understood correctly, while we are creating/showing the new
button, we must to associate to own onclick 1/2 function|s, is it right?
when the second? together?

 

[apatheticagnostic]

What I have to begin with is button A only.
User clicks button A.
In the onclick event for button A I have a function that creates
button B.  The function that creates button B attaches an onclick
event to button B.  After button B is created (while still in the
onclick event handler) I need to add another function to button B's
onclick event.

Sorry if this isn't clear, but it's a strange requirement.

Thanks for trying to help.

If something like

buttonb.onclick = (function(original) {
return function() {
original();
new_function();
};
})(buttonb.onclick);

doesn't work, would using the level 2 DOM handlers work for you? i.e.
buttonb.addEventListener('click', new_func);

 

[dunerunner]

If something like

buttonb.onclick = (function(original) {
return function() {
original();
new_function();
};
})(buttonb.onclick);

doesn't work, would using the level 2 DOM handlers work for you? i.e.
buttonb.addEventListener('click', new_func);

That sounds like an interesting alternative. However, I'm finding
that I can't even access button B while I'm still inside button A's
onclick event handler because it was only just created by the previous
function and not yet accessible, so I think it is not possible this
way. I need to somehow refresh the page before accessing button B.

Thanks for all of your great ideas, I appreciate them.

 

[apatheticagnostic]

That sounds like an interesting alternative.  However, I'm finding
that I can't even access button B while I'm still inside button A's
onclick event handler because it was only just created by the previous
function and not yet accessible, so I think it is not possible this
way.  I need to somehow refresh the page before accessing button B.

Thanks for all of your great ideas, I appreciate them.

This is hard to make suggestions on without seeing your code, but are
you sure it's not accessible? Try assigning it to a variable during
creation, and then passing it to the function that needs to modify its
onclick?

 

[RobG]

That sounds like an interesting alternative. However, I'm finding
that I can't even access button B while I'm still inside button A's
onclick event handler because it was only just created by the previous
function and not yet accessible, so I think it is not possible this
way. I need to somehow refresh the page before accessing button B.

Thanks for all of your great ideas, I appreciate them.

Presumably you kickoff the function that creates the button and adds
the onclick handler. That function should return a reference to the
button so you can add your onclick handler, but since you are using
getElementById and say you can't get a reference to it I'll presume
that doesn't happen.

The best solution is to have the function return a reference to the
button that it creates so that you can do stuff wtih it. But you say
you can't change that function so... a (rather horrible) alternative
is to use setTimeout with a short delay to add the onclick handler,
e.g.

function foo() {
...
addButtonB();
setTimeout( function(){
var buttonB = document.getElementById('buttonB');

/* add hanlder to buttonB using one of the
** methods suggested in this thread
*/

}, 10);
}

you may want to play with the length of the timeout, 10ms should be
OK.