Quick Javascript question

[Squornshellous Beta]

How would one cause a specific script to reload itself on click, without reloading the entire page?

Namely, I'm using a script that goes like this:

<script type="javascript">pickTextFrom(120);</script>

120 being just an example number, pickTextFrom being defined in an external script. I wanted to know how to get that to pick a new option, without reloading the entire page - it's quite script-heavy and takes a while to load.

 

[Negrek]

You say you want to reload a script without reloading the entire page, but what it actually sounds like you want to do is execute a block of code multiple times without reloading the page. Obviously you would want to do that with a function... and in your example it even looks like your script tag contains nothing but a function call. If that's the case then all you need to do is bind the function to some sort of event other than the page being loaded, like a button press:

<input type="button" value="Pick Text" onClick="pickTextFrom(120)" />

If you do that, then whenever the button is pressed the function will run anew. Obviously you can have all sorts of different triggers, but clicking a button is one of the more straightforward ones.

If that's *not* what you meant and you actually do want to reload the whole script for some reason, my question would be... why? I can think of only a couple of instances where you would want to do that, and I doubt they're what you're trying to do. There's probably a simpler way than what you have in mind.

 

[Squornshellous Beta]

Yeah, that's what I meant. I'm only a newbie to JS, so.

 

[1. Luftballon]

type javascript:pickTextFrom(121) in the location bar.

 

[Squornshellous Beta]

type javascript:pickTextFrom(121) in the location bar.

Not the point. I want the rest of the page to stay loaded - being script-heavy, it takes time to load - while the specific instance of the script re-runs. That just gives me a bliank page with my result in it.

If that's the case then all you need to do is bind the function to some sort of event other than the page being loaded, like a button press:

<input type="button" value="Pick Text" onClick="pickTextFrom(120)" />

If you do that, then whenever the button is pressed the function will run anew. Obviously you can have all sorts of different triggers, but clicking a button is one of the more straightforward ones.

So, say I have two table cells:

<tr><td><img src="images/mew.png"> Mew</td></tr>
<tr><td><script language="javascript">pickTextFrom(151);</script></td></tr>

(Obviously I'd have more than one to a row, but this is just an example.)

So how would I get it to run the function again - in its own specific cell - by clicking anywhere on the cells? Would that even be possible?
If not, would there be a way to have it run when I click on the <script> cell?

 

[Butterfree]

What you want is to put an event handler on those cells that fires when they're clicked. You can do this the same way Negrek did, with an onclick attribute on the relevant cells, but since your function is just returning the value you want to put in the cell, you'd need to make it onclick="this.innerHTML=pickFromText(151)". (I think that should work, anyway - I haven't used event attributes in years, since technically it's poor form to integrate the behaviour of the page into its structure, but honestly registering event handlers is a headache otherwise and I can't be bothered to go into that.)

 

[Squornshellous Beta]

Sorry, still not sure I'm quite getting this. So what would the code be?

<tr><td><img src="images/mew.png"> Mew</td></tr>
<tr><td onclick="this.innerHTML=pickFromText(151)"></td>

Something like that?

 

[Butterfree]

Try that - though, wait, what does your pickFromText function look like?

 

[Squornshellous Beta]

The external script is like this:

var gallery = new Array();

[...]

gallery[151] = new Array( [the options go here] );

[...]

function pickTextFrom(whichGallery) { var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write(''+ gallery[whichGallery][idx] +''); }

Then, in the page's <head>, it calls it (<script language="javascript" type="text/javascript" src="generate.js"></script>) and then whenever I want to generate one of the options, I just have <script type="javascript">pickTextFrom(whatever number);</script>.

 

[Butterfree]

Hm, okay. It won't work as I suggested if you have document.write in the function itself. Try writing "return gallery[whichGallery][idx];" instead of the document.write line, and then in the script tags in the cells, instead put document.write(pickFromText(151)) and so on. The onclick attribute can remain unchanged.

 

[Squornshellous Beta]

Okay. Thanks.