CodingForums.com - NEWBIE - Random text generator problem, button not staying?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - NEWBIE - Random text generator problem, button not staying? (http://www.codingforums.com/showthread.php?t=275894)

NEWBIE - Random text generator problem, button not staying?

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!

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

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.

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.