Dynamically Writing Javascript Function 1

theKeyper · Jul 17, 2005

Hi,

I need to write a javascript function dynamically. This function does not get called at any stage, it simply must exist (at a certain place) on the page. I have tried two methods as you see below. (For testing purposes I have simplified the code, and set a button to call the function that will not get called).

Code:

<script language="JavaScript" type="text/JavaScript">
	function myfunction()
	{
		var code='Hello JS';
		code+="\n";
		code+='<script language="JavaScript" type="text/JavaScript">';
		code+="\n";
		code+=' function myalert() { alert(\'stuff\'); } ';
		code+="\n";
		code+='<\/script>';
		document.getElementById('insert_53').innerHTML=code;
		alert(code);
	}
</script>
	<button onClick="myfunction()" id="test1">One</button>
	<br>
	<div id="insert_53"></div>
	<br>
	<button onClick="myalert()" id="test2">Two</button>

Here is the second try:

Code:

<script language="JavaScript" type="text/JavaScript">
	function myfunction()
	{
		
		thefunctionobj=function(){function myalert() { alert('stuff'); }};
		document.getElementById('insert_53').appendChild(thefunctionobj);
		
	}
</script>
	<button onClick="myfunction()" id="test1">One</button>
	<br>
	<div id="insert_53"></div>
	<br>
	<button onClick="myalert()" id="test2">Two</button>

Neither of these options work, however the first one seems to have more success (it is at least written, even if I can't call the function)

Thank you for your time.

Regards,

Keyper

The Key is more powerful than the Sword.

WoodyRoundUp · Jul 17, 2005

Try this:

<script language="JavaScript" type="text/JavaScript">
var thefunction;

function myfunction()
{
this.myalert = function()
{
alert('stuff');
};
}
</script>
<button onClick="thefunction = new myfunction();" id="test1">One</button>
<br>
<div id="insert_53"></div>
<br>
<button onClick="thefunction.myalert()" id="test2">Two</button>

theKeyper · Jul 17, 2005

Beautiful Mate! Thankyou.

If you are interested in viewing the final(ish) product, visit:

http://www.visualobsession.com.au/tests/jstest/javatest7.htm

Thanks again.

Keyper

The Key is more powerful than the Sword.

WoodyRoundUp · Jul 17, 2005

Glad I could be some help.

mrpicker · Aug 25, 2005

i am having a similar problem, kinda tough to explain, but here it goes:

i have a page with notes listed on it. above the notes is an empty <div>, and each note is written in its own <div>. beside each note is a link to edit that note. clicking this will do two things: 1) change the note into an editable textarea; and 2) write a spellcheck() function to the empty <div> above. I know that both of these things are happening, but I cannot call the fucntion that has been written to the empty <div>. Any ideas??

mmerlinn · Aug 25, 2005

theKeyper:

I tried running your link and all that happened was a blank page with '--' & 'Test' on it. Is that what was supposed to happen?s

mmerlinn

"Political correctness is the BADGE of a COWARD!"

WoodyRoundUp · Aug 25, 2005

code please?

mrpicker · Aug 30, 2005

basically, i need to do something like this:

<head>
<script>
function func1()
{
document.getElementById("newDiv1").innerHTML = "<script>function func2(){alert('doesnt matter, any function will do');}</script>";

document.getElementById("newDiv2").innerHTML = "<a href='javascript:func2();'>click for func2</a>";
}
</script>
</head>
<body>
<div id="newDiv1"></div>
<div id="newDiv2"></div>
<a href="javascript:func1()">Click1</a>
</body>

but there will be parameters passed to func1, used in func2, thats the need to create func2 dynamically. func2 will get written to newDiv1, i've done testing so i know it does that. the problem is that clicking on "click for func2" will not call this function. Is this explanation understandable??

mrpicker · Aug 30, 2005

actually, the above code will not work.
func1() should be changed to:

function func1()
{
document.getElementById("newDiv1").innerHTML = "<scr"+"ipt>function func2(){alert('doesnt matter, any function will do');}</scr"+"ipt>";

document.getElementById("newDiv2").innerHTML = "<a href='javascript:func2();'>click for func2</a>";
}

theKeyper · Sep 2, 2005

<b>mmerlinn:</b>

try hitting 'test' a few times, then the browse buttons. Then you can check out the source code.

<b>mrpicker:</b>

The following code may be of help to you:

Code:

<script language="javascript"> 
<!--
function newWin(){ 
ven = window.open('','_blank'); 

var results =document.documentElement.innerHTML; 
var match = "<"; 

var re = new RegExp("<", "g"); 

var newresults = results.replace(re, "&lt;"); 

ven.document.writeln(newresults ); 
} 

//-->
</script> 
<a href="#" onClick="javascript:newWin();">Test</a>

It displays the dynamic source of page. (no line breaks).

Also, have you tried the 'new' thing as listed above (see source sode of my example). I'm not sure if that will work for what you want to do.

Sorry I can't be of more help.

-Keyper

The Key is more powerful than the Sword.

tsuji · Sep 3, 2005

mrpicker wrote
>the problem is that clicking on "click for func2" will not call this function.
If you use innerHTML to assign script section, you will face with a couple of restriction.
[1] It works for ie only;
[2] More unexpectedly, the script section must not be bare, in the sense that the container must not contain only that script section. This may be a feature/bug.
With these two restrictions in mind, you can try this.
[tt]
function func1()
{
document.getElementById("newDiv1").innerHTML = "[blue]<span> </span>[/blue]<script>function func2(){alert('doesnt matter, any function will do');}<[red]\[/red]/script>";

document.getElementById("newDiv2").innerHTML = "<a href='javascript:func2();'>click for func2</a>";
}
[/tt]
For msie, you can also use insertAdjacentHTML method, which is making the insertion conceptually more focus and formal. But the restrictions remain the same.

If you need to be cross-browser, then it is much more involved.

tsuji · Sep 3, 2005

Further notes
I've forgotten to add another critical elements for ie.
[3] The script added in this manner must contain a defer attribute.
Combining the prev [1] & [2], the ie solution is this.
[tt]
//solution-1(ie)
function func1()
{
document.getElementById("newDiv1").innerHTML = "[blue]<span> </span>[/blue]<script [red]defer[/red]>function func2(){alert('doesnt matter, any function will do');}<\/script>";

document.getElementById("newDiv2").innerHTML = "<a href='javascript:func2();'>click for func2</a>";
}
[/tt]
Using insertAdjacent method, it is this.
[tt]
//solution-1a(ie)
function func1()
{
document.getElementById("newDiv1").insertAdjacentHTML("beforeEnd","[blue]<span> </span>[/blue]<script [red]defer[/red]>function func2(){alert('doesnt matter, any function will do');}<\/script>");

document.getElementById("newDiv2").insertAdjacentHTML("beforeEnd","<a href='javascript:func2();'>click for func2</a>");
}
[/tt]
Now, the mozilla ff/nn latest version, you need more steps. Here is the solution.
[tt]
//solution-2(ff/nn)
function func1()
{
var oelem,orng,shtml,oparsedhtml;

oelem=document.getElementById("newDiv1");
orng=oelem.ownerDocument.createRange();
orng.setStartBefore(oelem);
shtml="<script>function func2(){alert('doesnt matter, any function will do');}<\/script>"
oparsedhtml=orng.createContextualFragment(shtml);
oelem.appendChild(oparsedhtml);

oelem=document.getElementById("newDiv2");
orng=oelem.ownerDocument.createRange();
orng.setStartBefore(oelem);
shtml="<a href='javascript:func2();'>click for func2<\/a>"
oparsedhtml=orng.createContextualFragment(shtml);
oelem.appendChild(oparsedhtml);
}
[/tt]
Now that you don't need nonsense filling content (like arbitrary span thing in ie) and no need for defer attribute.

By combining the two, you get cross browser solution.

mmerlinn · Sep 3, 2005

theKeyper:

'Test' is just a word on the page. It is not a button, it is not a link, so nothing happens when I click it.

There are no Browse buttons, in fact no buttons or links of any kind.

mmerlinn

"Political correctness is the BADGE of a COWARD!"

theKeyper · Sep 4, 2005

mmerlinn,

I am now facinated. What browser/platform are you using?

Have you had a look at the source? Here is the code for that 'test' word:

Code:

<button onClick="licenceinsert(1);licenceinsert(2);licenceinsert(3);licenceinsert(4);licenceinsert(5);" id="test1">Test</button>

-Keyper

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!

Dynamically Writing Javascript Function 1

theKeyper

Technical User

WoodyRoundUp

Programmer

theKeyper

Technical User

WoodyRoundUp

Programmer

mrpicker

Programmer

mmerlinn

Programmer

WoodyRoundUp

Programmer

mrpicker

Programmer

mrpicker

Programmer

theKeyper

Technical User

tsuji

Technical User

tsuji

Technical User

mmerlinn

Programmer

theKeyper

Technical User

Similar threads

Part and Inventory Search

Sponsor