Question

Javascript noob here….
I am trying to build a site that will help my kids read predefined sentences from a select group, then when a button is clicked it will display one of the sentences. Is an array the best option for this?

For example, I have this array (below) and on the click of a button I would like one of these sentences to appear on the page.

<script type="text/javascript">
Sentence = new Array()
Sentence[0]='Can we go to the park.';
Sentence[1]='Where is the orange cat? Said the big black dog.';
Sentence[2]='We can make the bird fly away if we jump on something.'
Sentence[3]='We can go down to the store with the dog. It is not too far away.'
Sentence[4]='My big yellow cat ate the little black bird.'
Sentence[5]='I like to read my book at school.'
Sentence[6]='We are going to swim at the park.'
</script>

Again, is an array the best for this and how could I get the sentence to display? Ideally I would want the button to randomly select one of these sentences but just displaying one of them for now would help.

Answer 1

It’s simple enough to just use an array. Here is an example of doing so and retrieving a random sentence:

 var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
],

//the number of sentences in the array
maxSentences = sentences.length;

//get and return a random sentences from array
function getRandomSentence() {
    //calculate a random index
    var index = Math.floor(Math.random() * (maxSentences - 1));
    //return the random sentence
    return sentences[index];
}

To display the random sentence in a div, you can use a function like this: (note that this example uses jQuery to simplify, and to provide for cross browser usage):

//show a random sentences in a DOM selector
function showRandomSentence(selector){
    var randomSentence = getRandomSentence();  
    $(selector).html(randomSentence);
}

To see a working example of the above, visit this jsFiddle
​