How can I click on a joke and have a new joke appear?

[Michael]

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on the
saying and have it load a new one in its place.

 

[Lee]

Michael said:

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on the
saying and have it load a new one in its place.

There are many different possibly ways to display random jokes or sayings.

We would need to know how you're doing it to tell you how best to
change it so that it changes when you click on it.

 

[Hywel Jenkins]

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on the
saying and have it load a new one in its place.

<a href="page.htm">blah blah blah</a>

 

[Evertjan.]

Michael wrote on 22 sep 2003 in comp.lang.javascript:

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on the
saying and have it load a new one in its place.

<script>
j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

<div onclick="this.innerHTML=j[Math.floor(Math.random()*21)]">
Click here for jokes
</div>

 

[Ron]

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on the
saying and have it load a new one in its place.

Javascript is CLIENT SIDE
it can only change what is on the screen based on what has already been sent
to the browser.

If you send a page of say 10 jokes you could display 1 then the next on
clicking a 'next' button.

a suitable technique is to load each on to its own <div> with a unique ID

<div ID='a' style='visibility:hidden;'>
Joke 1
</div>
<div ID='b' style='visibility:hidden;'>

Joke 2
</div>
you would be better setting these all in an identical class controlling
absolute position etc.
then on clicking the button use getElementbyID to unhide the next and hide
the previous

On the other hand,
If you want to retrieve from a server you would have to use the script to
modify the URL and fetch the next page but that as you say is reloading the
page.

HTH

Ron.

 

[Michael]

Michael wrote on 22 sep 2003 in comp.lang.javascript:

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on the
saying and have it load a new one in its place.

<script>
j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

<div onclick="this.innerHTML=j[Math.floor(Math.random()*21)]">
Click here for jokes
</div>

This did not quite work. This is just about what I wanted. I keep
geting a message that says undefined. I think that the part after
innerHTML= has to be in the script too.

 

[Evertjan.]

Michael wrote on 25 sep 2003 in comp.lang.javascript:

Michael wrote on 22 sep 2003 in comp.lang.javascript:

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on
the saying and have it load a new one in its place.

<script>
j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

<div onclick="this.innerHTML=j[Math.floor(Math.random()*21)]">
Click here for jokes
</div>

This did not quite work. This is just about what I wanted. I keep
geting a message that says undefined. I think that the part after
innerHTML= has to be in the script too.

It works all right, tested on IE6, but you have to fill in all 20 texts,
otherwise you get that "undefined"

Or you could do Math.random()*3

 

[Douglas Crockford]

I know how to display random jokes or sayings. But only if I reload

the page does the script select a new saying. How can I click on
the saying and have it load a new one in its place.


<script>
j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

<div onclick="this.innerHTML=j[Math.floor(Math.random()*21)]">
Click here for jokes
</div>

This did not quite work. This is just about what I wanted. I keep
geting a message that says undefined. I think that the part after
innerHTML= has to be in the script too.

It works all right, tested on IE6, but you have to fill in all 20 texts,
otherwise you get that "undefined"

Or you could do Math.random()*3

Or better, use Math.floor(Math.random() * j.length). That way, you don't have to
edit the script when the number of jokes changes. And better still, use the
literal array notation. That way, you don't have to number the jokes.

j = [
"haha",
"again",
"last joke"];

http://www.JSON.org

 

[Mike Painter]

It works all right, tested on IE6, but you have to fill in all 20 texts,
otherwise you get that "undefined"

Or you could do Math.random()*3

Or better, use Math.floor(Math.random() * j.length). That way, you don't have to
edit the script when the number of jokes changes. And better still, use the
literal array notation. That way, you don't have to number the jokes.

j = [
"haha",
"again",
"last joke"];

Or realize that there are no new jokes.

 

[Evertjan.]

Douglas Crockford wrote on 25 sep 2003 in comp.lang.javascript:

j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

Or you could do Math.random()*3

Or better, use Math.floor(Math.random() * j.length). That way, you
don't have to

Not in the case under investigation, where there is a gap in the array !

 

[Evertjan.]

Mike Painter wrote on 26 sep 2003 in comp.lang.javascript:

j = [
"haha",
"again",
"last joke"];

Or realize that there are no new jokes.

That is a good one !

 

[Lasse Reichstein Nielsen]

Or realize that there are no new jokes.

#751 ?

/L

 

[Douglas Crockford]

j=new Array

j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

Or you could do Math.random()*3

Or better, use Math.floor(Math.random() * j.length). That way, you
don't have to

Not in the case under investigation, where there is a gap in the array !

The point was that if the literal object notation is used, there won't be a gap.

var j = ["haha", "next joke", "again", "last joke"];

Smaller, faster, easier to edit, no gaps.

http://www.JSON.org

 

[Michael]

Michael wrote on 25 sep 2003 in comp.lang.javascript:

Michael wrote on 22 sep 2003 in comp.lang.javascript:

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on
the saying and have it load a new one in its place.


<script>
j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

<div onclick="this.innerHTML=j[Math.floor(Math.random()*21)]">
Click here for jokes
</div>

This did not quite work. This is just about what I wanted. I keep
geting a message that says undefined. I think that the part after
innerHTML= has to be in the script too.

It works all right, tested on IE6, but you have to fill in all 20 texts,
otherwise you get that "undefined"

Or you could do Math.random()*3

Sorry. But for some reason, I could not quite get it to work. So I
messed around until I got it to work. Here is what I came up with.


<script>
j=new Array(2)
index = Math.floor(Math.random() * j.length) + 1;
</script>

<div onclick="this.innerHTML=index">Click Here</div>


Now I have another question. I just wanted to take it a step at a
time.

What I really would like to do, is to put each joke into seperate .js
files. Otherwise, since I have hundreds of them it would bog down the
page with too much data and take too long to load into the browser. I
read at www.netmechanic.com where if it takes more than 8 seconds to
load the page then most people will just get bored and go elsewhere.

I have lots of random content and I do not like it when some one has
to reload the whole page to see a different joke or whatever because
it increments the counter. So I thought it would be more convenient if
the person could just click on the joke TEXT and have it display a new
joke each time.

But not just 1 time. Over and over again until they got tired of
reading jokes.

I tried it with an iframe and then just put onclick=location.reload()
in the body tag of the html file in the iframe. That way each time I
clicked on the joke itself the iframe subpage reloaded and displayed a
new joke from the array. It worked great, except that some of the
jokes were larger than the iframe window and then I could not see the
whole thing. I placed each joke in a table, and then gave it a height
and width. But I did not know how to transfer the height and with of
the table in the iframe to the iframe height and width. You know so
that if the table with the joke became larger or smaller the iframe
would resize as needed.

So anyway, I thought there must be an easier way.

 

[Michael]

Michael wrote on 25 sep 2003 in comp.lang.javascript:

Michael wrote on 22 sep 2003 in comp.lang.javascript:

I know how to display random jokes or sayings. But only if I reload
the page does the script select a new saying. How can I click on
the saying and have it load a new one in its place.


<script>
j=new Array
j[0]="haha"
j[1]="next joke"
j[2]="again"
//....
j[20]="last joke"
</script>

<div onclick="this.innerHTML=j[Math.floor(Math.random()*21)]">
Click here for jokes
</div>

This did not quite work. This is just about what I wanted. I keep
geting a message that says undefined. I think that the part after
innerHTML= has to be in the script too.

It works all right, tested on IE6, but you have to fill in all 20 texts,
otherwise you get that "undefined"

Or you could do Math.random()*3

That script example I last gave you is no good. It just displays the
index number, not the joke in the array. For some reason I cannot get
it to display the joke. If I put this.innerHTML=j[1] it still says
undefined.

 

[Evertjan.]

Michael wrote on 26 sep 2003 in comp.lang.javascript:

That script example I last gave you is no good. It just displays the
index number, not the joke in the array. For some reason I cannot get
it to display the joke. If I put this.innerHTML=j[1] it still says
undefined.

What script are you talking about ?
Show it again please.

1 are you using IE and what version? or something else ?

2 start debugging:

this.innerHTML="Yes"
alert(j[1])

etc.

 

[Mike Painter]

#751 ?

Odd, I don't hear anybody laughing.
Some people just can't tell a joke.