CODEWITHSUNDEEP
javascriptarraysrandom
Timble
Timble

Reputation: 509

Random Sentence Picked From a JS Array as a Response

First, let me explain my code. I have created a game, that when you "poke" this monster, it generates a random number between 1 and 100. If that random number equals 5, you win, if not, it says you died and a timer goes for 2 seconds and then refreshes the page allowing you to "poke" again. It worked with just one sentence reply, but to spice it up, I wanted to add an array of possible death sentences so that when you click the image and you loose, then one of those sentences is picked randomly and that is the response.

My JS code:

var myTimer;
//Timer that reloads the page
function myTimerF() {
    var x = document.getElementById("Button");
    x.innerHTML = "<img src='poke.png' >";
    clearInterval(myTimer);
}

//generates a random number then checks if you won or not
function randomNumber() {
    var res = Math.floor((Math.random() * 100) + 1);

    var x = document.getElementById("Button")
    if (res == 5)
        x.innerHTML = "Winner! YOU ACTUALLY WON! IT'S A MIRICALE!";
    else

    function getRandomSentence() {
        var index = Math.floor(Math.random() * (maxSentences - 1));
        return sentences[index];
    }

    myTimer = setInterval(function () {
        myTimerF()
    }, 2000);
}
//Random death sentences
var sentences = [
    'You just got eaten! Try again in 2 seconds.',
    'You are currently being digested. Try again in 2 seconds.',
    'You have been incinerated, you may poke the monster in 2 seconds again.',
    'Your head has been removed from your body, try again in 2 seconds when we find it.',
    'You have been neautrilized. Try again in 2 seconds.',
    'You ran away out of fear. Try again in 2 seconds.',
    'Your legs are currently in the belly of the monster, try again in 2 seconds.'
],
maxSentences = sentences.length;

My HTML code:

<p id="Button" onclick="randomNumber()">
  <img src="poke.png" >
</p>

My problem is that the random array is not working. When you click the image button, nothing happens.

Upvotes: 0

Views: 1038

Answers (2)

danwarfel
danwarfel

Reputation: 880

Here you go, I made it into a JSFiddle that works properly: test it out

Declare all your variables up top (they get hoisted anyways): 

var myTimer,
    x = document.getElementById("button"),
    sentences = [ //Random death sentences
           'You just got eaten! Try again in 2 seconds.',
           'You are currently being digested. Try again in 2 seconds.',
           'You have been incinerated, you may poke the monster in 2 seconds again.',
           'Your head has been removed from your body, try again in 2 seconds when we find it.',
           'You have been neutralized. Try again in 2 seconds.',
           'You ran away out of fear. Try again in 2 seconds.',
           'Your legs are currently in the belly of the monster, try again in 2 seconds.'
        ],
    maxSentences = sentences.length;

Added an event listener:

x.addEventListener('click', randomNumber, false);

This is your timer. We call it right away to initialize your code:

//Timer that reloads the page
function myTimerF() {
    x.innerHTML = "<img src='http://lorempixel.com/640/480/abstract/' >";
    clearInterval(myTimer);
}

myTimerF();

And finally the two other functions you need: 

//Produces random sentence, obviously
function getRandomSentence() {
    var index = Math.floor( Math.random() * (maxSentences - 1) ),
        randoSen = sentences[index];
    console.log('rando sentence #: ' + index);
    x.innerHTML = randoSen;
}

//generates a random number then checks if you won or not
function randomNumber() {
    var res = Math.floor((Math.random()*100)+1);
    console.log('random number 1 - 100 is: ' + res);
    if (res == 5) {
        x.innerHTML = "Winner! YOU ACTUALLY WON! IT'S A MIRICALE!";
    } else { getRandomSentence(); }

    myTimer=setInterval(function(){myTimerF()},2000);
}

Upvotes: 1

Gavin
Gavin

Reputation: 7942

I moved your getRandomSentence() function out of the else statement and below the other functions. That function wasn't even being called, so I added the function call into the else statement. I changed your setInterval to a setTimeout because it only needs to be called once (setInterval is used for a repetitive interval, setTimeout only gets fired once.)

//Timer that reloads the page
function myTimerF() {
    var x = document.getElementById("Button");
    x.innerHTML = "<img src='poke.png' >";
}

//generates a random number then checks if you won or not
function randomNumber() {
    var res = Math.floor((Math.random() * 100) + 1);

    var x = document.getElementById("Button")
    if (res == 5)
        x.innerHTML = "Winner! YOU ACTUALLY WON! IT'S A MIRICALE!";
    else {
        x.innerHTML = getRandomSentence();
        myTimer = setTimeout(myTimerF, 2000);
    }
}

function getRandomSentence() {
    var index = Math.floor(Math.random() * (maxSentences - 1));
    return sentences[index];
}

//Random death sentences
var sentences = [
    'You just got eaten! Try again in 2 seconds.',
    'You are currently being digested. Try again in 2 seconds.',
    'You have been incinerated, you may poke the monster in 2 seconds again.',
    'Your head has been removed from your body, try again in 2 seconds when we find it.',
    'You have been neautrilized. Try again in 2 seconds.',
    'You ran away out of fear. Try again in 2 seconds.',
    'Your legs are currently in the belly of the monster, try again in 2 seconds.'
],
maxSentences = sentences.length;

Upvotes: 0

Related Questions