NEWBIE - Random text generator problem, button not staying?

cmyk529 · 10-09-2012, 02:30 PM

Hiya, this is my first post - I'll try to make sure I'm doing things correct!

I'm trying to create a random text generator, I've got the random text generating part down, but after I click the button and get the random text, I lose my button so I can't continue to generate random text. Help?

Code:

<!DOCTYPE html>
<html>
<body>

<p id="generator">Generate a random fact</p>

<button onclick="myFunction()">Try it</button>

<script>
Array.prototype.myUcase=function()
{
for (i=0;i<this.length;i++)
  {
  this[i]=this[i].toUpperCase();
  }
}

function myFunction()
{
var r_text = new Array ();
r_text[0] = "Give a homeless man a gift card";
r_text[1] = "Hold the door for a stranger";
r_text[2] = "Pay for a stranger's lunch";
r_text[3] = "Compliment the next person you see";
r_text[4] = "Take your neighbor's dog for a walk";
r_text[5] = "Send greeting cards to random addresses";
r_text[6] = "Load a vending machine with money";
var i = Math.floor(7*Math.random())

document.write(r_text[i]);
}

</script>

</body>
</html>

<script language="JavaScript">
<!--

//-->
</script>

Here is a snippit if that doesn't work:

http://snipt.org/vfAe1

Also, any resources or directions you can provide would be great, my knowledge is good in some areas, and I'm a complete idiot in other areas!

jmrker · 10-09-2012, 02:35 PM

Code:

document.write(r_text[i]);

You cannot use a document.write after the page has been rendered.
If you call it, it reloads the page to the original contents.

Consider creating a <div> area with an ID and using .innerHTML = r_text[i] instead

cmyk529 · 10-09-2012, 03:00 PM

Code:

<!DOCTYPE html>
<html>
<body>
    

<p id="generator">Generate a random fact</p>

<button onclick="myFunction()">Try it</button>

<div id="content">
   <script type="text/javascript">
    function changeText(){
	document.getElementById('boldStuff').innerHTML = r_text[i];
}
</div>

<div id="random">   
<script>
Array.prototype.myUcase=function()
{
for (i=0;i<this.length;i++)
  {
  this[i]=this[i].toUpperCase();
  }
}

function myFunction()
{
var r_text = new Array ();
r_text[0] = "Give a homeless man a gift card";
r_text[1] = "Hold the door for a stranger";
r_text[2] = "Pay for a stranger's lunch";
r_text[3] = "Compliment the next person you see";
r_text[4] = "Take your neighbor's dog for a walk";
r_text[5] = "Send greeting cards to random addresses";
r_text[6] = "Load a vending machine with money";
var i = Math.floor(7*Math.random())

document.getElementById('boldStuff').innerHTML = r_text[i];
}

</script>
</div>

</body>
</html>

<script language="JavaScript">
<!--

//-->
</script>

Not sure if I've done this correctly.

Philip M · 10-09-2012, 03:27 PM

Code:

<!DOCTYPE html>
<head>
</head>
<body>
    
<p id="generator">Generate a random fact</p>

<button onclick="myFunction()">Try it</button>

<div id="boldStuff"">
</div>

<script type = "text/javascript">

function myFunction() {
var r_text = [];
r_text[0] = "Give a homeless man a gift card";
r_text[1] = "Hold the door for a stranger";
r_text[2] = "Pay for a stranger's lunch";
r_text[3] = "Compliment the next person you see";
r_text[4] = "Take your neighbor's dog for a walk";
r_text[5] = "Send greeting cards to random addresses";
r_text[6] = "Load a vending machine with money";
var i = Math.floor(7*Math.random())

document.getElementById('boldStuff').innerHTML = r_text[i].toUpperCase();
}

</script>
</div>

</body>
</html>

A small defect is that the same quote may appear twice in succession by random selection. You can overcome this by shuffling your array.

Your uppercase function is quite superflous here.

<script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
The  comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

Quizmaster: Which African country gives its name to the complaint known as 'gippy tummy'?
Contestant: Venezuela.