Button Won't Call Function - Annoying!

Dalal · 02-09-2007, 10:04 PM

I guess you could say I'm fairly new to javascript, so this might be a silly coding mistake of mine. Here is the problem:

I've created a page in which the user can click on a button to call Function 1 using onClick. This function writes out a whole new HTML page using document.write. In this 'new page', it creates yet another button, which is supposed to call Function 2 using onClick. The problem is, when you click on this button you get an error in IE 6.

----------------------------
Line: 1
Char: 1
Error: Object Expected
----------------------------

Yeah, well, that doesn't help me much, except now I know that for some reason, the browser can't find Function 2. Here's a simplified version of my code below:

Code:


<input type='button' value='Click Here' onClick='Test()'>


<!----------------------------------------------->

<script type='text/javascript'>

function Test()
{
  document.write("<input type='button' value='Click Here' onClick='AnotherTest()'>")
}

function AnotherTest()
{
  document.write("This text won't show up because of the problem!")
}

</script>


<!----------------------------------------------->

In the function 'AnotherTest', look at what I've written. See if that text shows up in your browser. It doesn't show up in Firefox 2.0.0.1 and IE 6.0, I'm pretty sure. Why? What is wrong with the code?

Hope someone can help me out!

Thanks a lot,
Dalal

Mr J · 02-09-2007, 10:31 PM

document.write will replace everything in your page so when the second button is written to the page the script will not exist.

Press your first button then view the source of the page to see what the page contains

Dalal · 02-10-2007, 04:54 AM

Thanks for your reply. I can't believe I didn't think of that. However, something still doesn't make sense. In the following code I've added one extra line. I've called the function AnotherTest() after the document.write. If the document.write creates a whole new page, then why is it still able to call AnotherTest even though it should have been erased? Also, I tried viewing the source right after clicking the first button. For some reason, my SBC Yahoo Browser (which is IE-based), won't allow me to view the source at that point. Viewing the source in Firefox causes a blank window to popup, which should contain the source. But no, it's blank. Weird. I can't tell what's going on.

Code:


<input type='button' value='Click Here' onClick='Test()'>


<!----------------------------------------------->

<script type='text/javascript'>

function Test()
{
  document.write("<input type='button' value='Click Here' onClick='AnotherTest()'>")
  AnotherTest()
}

function AnotherTest()
{
  document.write("This text DOES show up!")
}

</script>


<!----------------------------------------------->

Can you think of any workaround for the problem I'm having? Is there another way I can manage to get a button written in a function call another function? What about using an external script? I'll try that tomorrow. Meanwhile, if you can come up with another way. I would greatly appreciate any help. Thanks!

- Dalal

Mr J · 02-10-2007, 08:47 AM

The anotherTest within the function test is probably run before the browser can render the first document.write so the second document,write will overwrite the first making the second one work.

To test this theory if you put the call to anotherTest in function test on a time out you will find it will not work and "object expected" will be thrown up

Code:

<script type='text/javascript'>

function Test(){
document.write("<input type='button' value='Click Here' onClick='AnotherTest()'>")
setTimeout("AnotherTest()",100)
}

function AnotherTest(){
document.write("This text DOES show up!")
}


</script>

Try it this way

PHP Code:


			
<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<script type='text/javascript'>



function test(){



document.getElementById("mybutton").onclick=function(){

anotherTest()

}



document.getElementById("mytext").innerHTML="The next press of this button will call function anotherTest"



}



function anotherTest(){

document.getElementById("mytext").innerHTML="I am function anotherTest"



}



</script>

</HEAD>

<BODY>



<input id="mybutton" type="button" value="Click Here" onclick="test()"'>

<div id="mytext"></div>



</BODY>

</HTML>

Dalal · 02-10-2007, 06:43 PM

Thank you for taking the time to write out that code for me! I ran it and it worked well. I only wish there was a way to erase the button using javascript. I searched on the net but couldn't find anything.

Also, something is still puzzling me. You said that the problem is due to the document.write, right? <- Haha

Well, this doesn't make any sense to me. I erased the first line of the code I posted in my first post and added a line in the script tag. Why does it work now when it didn't earlier? What difference does it make if I'm calling the function from within the script tag than through a button press? Check this out:

Code:


<!----------------------------------------------->

<script type='text/javascript'>

Test()

function Test()
{
  document.write("<input type='button' value='Click Here' onClick='AnotherTest()'>")
}

function AnotherTest()
{
  document.write("This text DOES show up for some reason!")
}

</script>


<!----------------------------------------------->

What could be going on?

Thanks for all your help so far!

Mr J · 02-10-2007, 10:20 PM

Thats probably because you are using document.write as the page is being rendered.

Try it this way when the page has finished loading, it will throw up an error

PHP Code:


			
<script type='text/javascript'>



onload=function Test(){

document.write("<input type='button' value='Click Here' onClick='AnotherTest()'>")

}



function AnotherTest(){

document.write("This text DOES show up for some reason!")

}

</script>

This example hides the button

PHP Code:


			
<HTML> 

<HEAD> 

<TITLE>Document Title</TITLE> 

<script type='text/javascript'> 



onload=function test(){ 



document.getElementById("mybutton").onclick=function(){ 

anotherTest() 

} 



} 



function anotherTest(){

document.getElementById("mytext").innerHTML="I am function anotherTest" 

document.getElementById("mybutton").style.display="none"



} 



</script> 

</HEAD> 

<BODY>



<div id="mytext"></div> 

<input id="mybutton" type="button" value="Click Here"> 





</BODY> 

</HTML>

Dalal · 02-11-2007, 12:28 AM

Thank you so much for your help!