Click to See Complete Forum and Search --> : Dynamic 'onClick' doesn't work?
JayDie
04-21-2004, 07:34 AM
Hello all!
I've got a problem/question:
Can't you 'set' the onClick event dynamically?
my code:
<html>
<head>
<script language="javascript">
var divElement
function showDiv()
{divElement = document.createElement('DIV')
document.body.insertAdjacentElement('beforeEnd', divElement)
divElement.style.width = '120'
divElement.style.height = '100'
divElement.innerText = 'bladibladibla \ntexttext'
divElement.style.position = 'absolute'
divElement.style.top = event.y
divElement.style.left = event.x
divElement.onClick = 'javascript:alert("Testing")'
alert(document.body.innerHTML)
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv()">
</body>
</html>
As you can see in the alert, which shows you the innerHTML, it seems to be good. But when you click on the div, nothing happens... Can't you set the 'onClick' event dynamically?
buntine
04-21-2004, 07:59 AM
Yes, but from memory, you can only call a function which takes no parameters.
Try adding a function which displays an alert prompt, then invoke this function by dynamically setting it in the onClick event.
Regards,
Andrew Buntine.
JayDie
04-21-2004, 08:13 AM
If you mean something like this:
...
<script language="javascript">
var divElement
function showDiv()
{...
divElement.onClick = 'alertSomething()'
...
alert(document.body.innerHTML)
}
function alertSomething()
{alert("Testing")
}
</script>
...
...that doesn't work... :(
Do I have to give the Div an ID, then get it by ID and set the onClick event? That's not really what I want, but if that works and it is the only choice...? :confused:
JayDie
04-21-2004, 08:21 AM
These two also don't solve my problem:
...
divElement.id = 'divID'
document.getElementById('divID').onClick = 'function()'
document.getElementById('divID').setAttribute('onClick', 'function()')
:confused:
JayDie
04-21-2004, 08:33 AM
If I create a string which contains all attributes and I add this to the body, it works. But this isn't very nice... :(
var divElement
divElement = '<div style="position: absolute; blabla" onClick="function()">texttext</div>'
document.body.innerHTML += divElement
Why does my first solution not work?!
buntine
04-21-2004, 09:09 AM
You should not need quotes or parantheses. Also, it should be in lowercase. Try it like this:
divElement.onclick = alertSomething;
Regards,
Andrew Buntine.
JayDie
04-21-2004, 09:23 AM
Thanks buntine for your reaction.
Buntine: Also, it should be in lowercase guess that doesn't matter?
If I do:
divElement.onclick = function()
it immediately executes the function (as aspected)
divElement.onclick = 'function()'
doesn't work
divElement.onclick = (function())
it immediately executes the function (as aspected)
divElement.onclick = ('function()')
doesn't work
var func = 'function()'
divElement.onclick = func
doesn't work
:(
buntine
04-21-2004, 09:35 AM
So, you have it working? The code i gave you does work..
<script language="javascript">
var divElement;
function showDiv()
{
divElement.onclick = alertSomething;
alert(document.body.innerHTML);
}
function alertSomething()
{
alert("Testing");
}
</script>
By the way, you should always end your statements with a semicolon.
Regards,
Andrew Buntine.
JayDie
04-21-2004, 09:50 AM
YES YES YES
Now it works... What I did wrong:
Your solution, I still placed the () after the function.
Now it works. I wanted to add the parameter 'this' to the function, but it isn't necessary, because if I say in the function 'this.id' it'll give the correct ID.
Buntine, you say:
you should always end your statements with a semicolon
for JavaScript this isn't necessary? :confused: Only if you place to statements after each other? I know in C/C++ you have to place the semicolon, but at JavaScript it isn't nesessary?
Thanks Buntine, great work!!! :D
buntine
04-21-2004, 09:58 AM
Thats ok, im glad to help.
I realise its not necessary, but it is definetely a good practise. You dont need too add semi-colons, though, i would advise you to.
All professionally written JavaScript applications implement the use of semi-colons.
Regards,
Andrew Buntine.
If I do:
code:--------------------------------------------------------------------------------divElement.onclick = function()
..............
As far as I know, there are two basic accepted way to fire a function using a dynamic event handler:
1.
obj.onevent=some_function;
2.
obj.onevent= function(){
some_function(param1,param2);
...
other statements here
...
}
The second is used for multiple function firing or for firing a function with one or more parameters.
buntine
04-22-2004, 04:56 AM
Thanks Kor,
I have often wondered how you would go about invoking a function with one or more parameters using this method.
Regards,
Andrew Buntine.
fredmv
04-23-2004, 09:56 PM
You can also use DOM2 Events:<script type="text/javascript">
//<![CDATA[
onload = function()
{
document.getElementById('foo').addEventListener('click', function() { alert('event fired!'); }, false);
}
//]]>
</script>Of course this assumes you've already created an element with its id attribute as "foo".
buntine
04-23-2004, 11:00 PM
JavaScript is becoming more and more like Java!
Originally posted by fredmv
You can also use DOM2 Events:<script type="text/javascript">
//<![CDATA[
onload = function()
{
document.getElementById('foo').addEventListener('click', function() { alert('event fired!'); }, false);
}
//]]>
</script>Of course this assumes you've already created an element with its id attribute as "foo".
Thanks, I didn't now this way...