Generate Random Sentences from an Array Javascript

Question

For a class assignment, we need to make a funny website that highlights the random feature of JavaScript. My website is a yo momma joke generator, so that each time you refresh the page, a new joke appears. However, my code isn't working and I can't seem to figure out why it isn't. I'm a beginner, so any help would be greatly appreciated!! :)

Here is my code:

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);

  smooth ();
}


function draw () {
    background (255, 255, 255);
}

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

var sentences= [
    'so fat not even Dora can explore her',
    'so  fat I swerved to miss her and ran out of gas',
    'so smelly she put on Right Guard and it went left',
    'so fat she hasn’t got cellulite, she’s got celluheavy',
    'so fat she don’t need no internet – she’s already world wide',
    'so hair her armpits look like Don King in a headlock',
    'so classless she could be a Marxist utopia',
    'so fat she can hear bacon cooking in Canada',
    'so fat she won “The Bachelor” because she all those other bitches',
    'so stupid she believes everything that Brian Williams says',
    'so ugly she scared off Flavor Flav',
    'is like Domino’s Pizza, one call does it all',
    'is twice the man you are',
    'is like Bazooka Joe, 5 cents a blow',
    'is like an ATM, open 24/7',
    'is like a championship ring, everybody puts a finger in her'
],

maxSentences = sentences.length;

and here is my html:

<html>
    <head>
        <title>new tab</title>

        <meta charset="utf-8">

        <script src='./js/jquery-2.1.1.min.js' type='text/javascript'></script>
        <script src='./js/p5.min.js' type='text/javascript'></script>
        <script src='./js/sketch.js' type='text/javascript'></script>
        <script src='./js/main.js' type='text/javascript'></script>

        <link href='./css/reset.css' media='all' rel='stylesheet' type='text/css' />
        <link href='./css/main.css' media='all' rel='stylesheet' type='text/css' />
    </head>
    <body>

    </body>
</html>

You returned a random sentence, and then what? How will the text get drawn to the page? — Nayuki
– Nayuki, Commented Oct 16, 2015 at 1:03
@NayukiMinase I'm not sure how to do that, is there a function i need to call? — musst248
– musst248, Commented Oct 16, 2015 at 1:51

deamentiaemundi · Accepted Answer · 2015-10-16 02:07:27Z

I don't know why I'm doing this; am I too soft for this world?

Here is a rough template you can start playing with

<!DOCTYPE html>
<html>
<head>
<!-- You need UTF-8 here because you use some characters not in ASCII -->
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script>
/*
    Math.random() returns a number between 0 and 1 excluding 1 itself.
    That together with floor function returns a number between 0 and
    max-1 (here max = sentence.length) and fits the zero-based numbering
    of the elements in the array
*/
function getRandomSentence () {
    var index= Math.floor(Math.random() * (sentences.length));
    return sentences[index];
}

var sentences= [
    'so fat not even Dora can explore her',
    'so  fat I swerved to miss her and ran out of gas',
    'so smelly she put on Right Guard and it went left',
    'so fat she hasn’t got cellulite, she’s got celluheavy',
    'so fat she don’t need no internet – she’s already world wide',
    'so hair her armpits look like Don King in a headlock',
    'so classless she could be a Marxist utopia',
    'so fat she can hear bacon cooking in Canada',
    'so fat she won “The Bachelor” because she all those other bitches',
    'so stupid she believes everything that Brian Williams says',
    'so ugly she scared off Flavor Flav',
    'is like Domino’s Pizza, one call does it all',
    'is twice the man you are',
    'is like Bazooka Joe, 5 cents a blow',
    'is like an ATM, open 24/7',
    'is like a championship ring, everybody puts a finger in her'
];

function scribble(){
  // get the canvas element you want to write to
  var canvas = document.getElementById("woodcut");
  // get a handle for the above canvas (here 2d only for simple text)
  var context = canvas.getContext("2d");
  // the canvas is blank the first time only, so erase the content
  // even if it is already blank, checking for it would be more
  // complicated and slower, too
  context.clearRect(0, 0, canvas.width, canvas.height);
  // choose a font (you can choose the size also as you can see)
  context.font = "30px Arial";
  // the letters are filled and they are filled in red
  context.fillStyle = "red";
  // center the text horizontally
  context.textAlign = "center";
  // put a random line in the middle of the canvas
  // the +10 account for the fonttype's height
  context.fillText(getRandomSentence(),0, canvas.height/2 + 10);
}
</script>
</head>
<body>
An indifferent opinion<br>
<canvas id="woodcut" width="1000" height="100"
style="border:10px solid #665599;">
This text shows up if the canvas element is  not supported
</canvas>
<br>
<button onclick="scribble()">scribble</button>


</body>
</html>

It is not the best style, to say the least, it is just for playing around.

Ow, too late! Again!

thanks, this worked! Is there anyway I can make the sentence appear without clicking the button. My intention was just to have a new one appear each time the page was refreshed
You may use <body onload="scribble()"> but some users might have disabled onload (I have, for example)

Nayuki · Accepted Answer · 2015-10-16 01:58:14Z

0

In your HTML file, between <body> ... </body>, add this line of code:

<p id="MyRandomSentence"></p>

At the end of your JavaScript file, add these lines of code:

var element = $("#MyRandomSentence");
var sentence = getRandomSentence();
element.text(sentence);

answered Oct 16, 2015 at 1:58

Nayuki

18.8k6 gold badges61 silver badges84 bronze badges

4 Comments

musst248 Over a year ago

thanks! I tried this and for some reason it still didn't make the sentence appear. Did I need to call the text in my code?

Nayuki Over a year ago

You might have a syntax error. You see at the end of sentences, just before maxSentences, the code says ],? Please change that to ];

musst248 Over a year ago

I fixed the error, but still not appearing. Is there something I need to put in my html file then? I've been trying a bunch of different things, but nothing makes the sentences load

Nayuki Over a year ago

Try to see if your browser gives you JavaScript error messages. Press F12 and go to the "JavaScript console" panel. It might tell you that you have an error at some line number.

Collectives™ on Stack Overflow

Generate Random Sentences from an Array Javascript

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related