Skip to content Skip to sidebar Skip to footer

How Do I Display A Random Phrase From A List When A Button Is Clicked In A Web Page?

I am creating a web page where someone can visit it. They type a question in a field and click a button, and a response is passed back to them. (Kind of like a magic 8 ball). What

Solution 1:

To do it without a page load (i.e. immediately after the button click), you'll have to do it in Javascript (working jsfiddle example here)

<a id="myButton" href="#">
    click here to get random stuff
</a>

<div id="myRandomDiv">
</div>

<script type="text/javascript" charset="utf-8">
    var randomStrings = [
        "hello 1",
        "hello 2",
        "hello 3", 
        "hello 4",
        "hello 5",
    ];



    var randomDiv = document.getElementById("myRandomDiv");

    document.getElementById("myButton").addEventListener("click", function() {
          randomIndex = Math.ceil((Math.random()*randomStrings.length-1));
          newText = randomStrings[randomIndex];
          randomDiv.innerHTML = newText;
    });
</script>    

To do this instead in PHP (which will require a new page load), you could do this:

<?php


$randomThings = array(
    'random thing 1',    
    'random thing 2',    
    'random thing 3',    
    'random thing 4',    
    'random thing 5',    
    'random thing 6',    
    'random thing 7 ',    
);

?>




<!-- REST OF YOUR PAGE -->

<?php

echo $randomThings[mt_rand(0,count($randomThings)-1)];

?>

<!-- OTHER STUFF -->

First, we create an array ('list') of random things and store it in the variable $randomThings.

Elements in an array can be accessed using $variableName[$index] -- in this case, the indices will simply be 0,1,2,3,4,5,6.

The reason this one-liner (beginning with 'echo') works is, mt_rand is going to return a random number between 0 and 6, so it'll grab a random element from the $randomThings array. echo will then spit it to the page.


Solution 2:

Dorkitude's answer is a fine example but just as an additional bit of advice I would like to point out that it is usually considered bad practice to hard code data inside your scripts (i.e. $value = 'someValue') unless there is absolutely no other way around it. Instead you would use some kind of data source for your responses instead (plain text file, database, web service etc).

For example lets say you have stored your list in a plain text file called 'randomThings.txt' and placed each response on its own line. You could then adapt Dorkitude's code like so:

<?php
    // Flags set here to ensure integrity
    $randomThings = file('responses.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
?>

<!-- REST OF YOUR PAGE -->

<?php

    echo $randomThings[mt_rand(0,count($randomThings)-1)];

?>
<!-- OTHER STUFF -->

Solution 3:

I know you tagged the question PHP, but you might want to consider using javascript instead. The advantage is that you won't need to reload the page - for something this simple, there isn't really any advantage to using php.

A javascript solution would look something like this:

<html>
  <head>
    <script type='text/javascript'>
      var answerArray = new Array("yes", "no", "maybe");

      function getAnswer() {
        document.getElementById('answerDiv').innerHTML = 
          answerArray[Math.floor(Math.random() * answerArray.length)];
      }
    </script>
  </head>
  <body>
    <input id='questionField' type='text' /><br/>
    <input type='submit' value='Ask Me!' onclick='getAnswer()' />
    <div id='answerDiv'></div>
  </body>
</html>

Post a Comment for "How Do I Display A Random Phrase From A List When A Button Is Clicked In A Web Page?"