Create function then reference

dexeloper · Jul 2, 2008

I'm trying to create a javascript function on-the-fly. It loads OK but errors when the button is clicked (dreaded object required). I suspect it's a bit of an old chestnut but if you could help there's a case of ketchup in the post.

Code:

<html>
<head>
<script language = "JavaScript" type="text/javascript">
function onload() {
var jselem = document.createElement("div");
jselem.innerHTML =  "<script language = 'JavaScript' type='text/javascript'>function xx(){alert('jkjk');}<\/script>";
document.getElementById("jsdiv").appendChild(jselem);
}
</script>
</head>
<body onload='onload()'>
<input type=button onclick='xx()'>
<div id="jsdiv"></div>
</body>
</html>

Stretchwickster · Jul 3, 2008

Would something like this work for you:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
  <script language = "JavaScript" type="text/javascript">
    function loadPage() {
      xx = new Function("alert('jkjk');");
    }
  </script>
</head>
<body onload="loadPage()">
  <input type="button" onclick="xx()" value="Click me" />
  <div id="jsdiv"></div>
</body>
</html>

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

dexeloper · Jul 3, 2008

Clive many thanks for that. I've actually ended up using:

xx = function(){alert('jkjk');}

The name and content of the function can be variables used within an eval. I hadn't realised (or forgotten) that declaring a variable without 'var' makes it global. This means I can create functions in a function that are available to all.

Many thanks again. You certainly set me on the right path.

Ketchup or OK sauce?

Stretchwickster · Jul 3, 2008

No problem, glad you found a way forward.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

tsuji · Jul 3, 2008

[1] The original rational needs a bit of care in the detail to get it work. It has some generic interest in showing the uses of some methods which may not be well-known.

[1.1] But, before doing so, a note: You should never call the handler onload(). It is the sure way to get error. So you should change the name of the handler in any case, no matter whether the function is proper or not.

[2] Here is an implementation.
[tt]
function onloadxx() {
var jselem = document.createElement("div");
var s=" <script type='text/javascript' defer>function xx() {alert('jkjk');}<\/script>";
if (!!window.ActiveXObject) {
document.getElementById("jsdiv").insertAdjacentHTML("beforeEnd",s);
} else if (!!window.netscape) {
var r=document.createRange();
var oscript=r.createContextualFragment(s);
jselem.appendChild(oscript);
document.getElementById("jsdiv").appendChild(jselem);
}
}
[/tt]
[2.1] And the body onload line would be like this.
[tt] <body onload="onloadxx()">[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Create function then reference

dexeloper

Programmer

Stretchwickster

Programmer

dexeloper

Programmer

Stretchwickster

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor