CODEWITHSUNDEEP
javascriptjquerywebrandom
musst248
musst248

Reputation: 23

Generate Random Sentences from an Array Javascript

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>

Upvotes: 0

Views: 6559

Answers (2)

deamentiaemundi
deamentiaemundi

Reputation: 5525

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!

Upvotes: 2

Nayuki
Nayuki

Reputation: 18533

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);

Upvotes: 0

Related Questions