Javascript events problem

[TheReef]

Hi All
There is probably a very simple solutoin to this, which I cannot see.
All I want to do is print some text when a button is clicked:


<script type="text/javascript">

function write() {
document.write("hello world")
}

</script>

<input type="button" onclick="write()" value="Print hello world">


What am I doing wrong? When I click on the button, all I get is a white screen.
Thankyou.

 

[angelwatt]

There's a few ways to handle it. Here's a simple solution though.

Add this to the body tag:

<div id="writehere"></div>

Then you're JavaScript will be:

function write() {
  spot = document.getElementById("writehere");
  spot.innerHTML = "hello world";
}

The problem is that when you use document.write it rewrites the whole page. And like I said, there's multiple solutions to do what you need. Also you shouldn't name your function write since there is already a function named write, which you called. See how that might be a problem too?

 

[TheReef]

That worked great, thankyou!
Another question,
In the function that I have created, am I able to refference another external Javascript file?

What I have done below doesn't seam to do anything when I click the button.
(I changed the function name to "writing" btw).

 <script type="text/javascript">
function writing() {
spot = document.getElementById("writehere")
spot.innerHTML = spot.innerHTML + 
"<script type=\'text/javascript\' src=\'external.js\'></script>"
}
</script>

 

[bootedbear]

When you import a JS file, it acts exactly as if you had included it inline.

 

[angelwatt]

Adding in another JS file isn't so easy, but check this article for details, http://www.webreference.com/programming/javascript/mk/

But you can take another approach. Below is some code. When I wrote it up I had it all in the body tag, but doesn't need to be done that way. It basically outputs the output of the external javascript file into a hidden div tag, then when the button is pushed it changes the div style to block (which will allow it to be seen).

<div id="writehere" style="display:none;">
<script type='text/javascript' src='test1.js'></script>
</div>

<script type="text/javascript">
function writing()
{
  spot = document.getElementById("writehere");
  spot.style.display = 'block';
}
</script>

<input type="button" onclick="writing()" value="push me" />

I'm not sure what you're trying to accomplish overall so an exact solution is hard to say, but this should let you know of an approach. If you need further details just ask.

 

[TheReef]

Thanks heaps for this.
I think I might be doing this the wrong way…

Basically, my goal is to make a pushbutton be a download button for a file.
When clicked, the external javascript file loads (which is really a php file) {I have that part sorted out}. The PHP script is then meant to load a counter file and add 1 to it so I know how many downloads of that file I get. {I also have that working}

I don't know if the server will load the php file when opened by the javascript…

There has got to be a better way of doing this

 

[angelwatt]

It sounds like AJAX will help you out. Just do some reading on it to see if it meets your needs. JavaScript can call PHP files using AJAX.