Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question 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!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts
    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

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    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 <!-- and //--> 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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    cmyk529 (10-18-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •