Web Page - html & JavaScript

Step 1 - Creating a function

Use this sample code as a starting point: https://www.w3schools.com/code/tryit.asp?filename=GA6M8RYYALHK

The button calls a function. The function needs to:

pick a random subject
pick a random verb
pick a random object
combine them to make a new variable - myExcuse
put myExcuse in the textarea on the page

First we need to make variables for subject, verb, object and myExcuse. Do these need to be inside the function?

The syntax is: var subject="The dog"

In the function we need to combine these to make an excuse: myExcuse = subject + verb + object

Finally we need to send myExcuse to the textarea using the getElementById() method.

We can copy the code and save in a Google Doc to continue with it another time.

Step 2 - Arrays

Use this link again: https://www.w3schools.com/code/tryit.asp?filename=FZMJVJIIB29M , but paste in your previously saved code.

We need alternative values for our variables. This is achieved using an array:

var subject = [ "My annoying little sister" , "My pet goat" , "A complete stranger" ]

And now:

subject[0] has the value "My annoying little sister"
subject[1] has the value "My pet goat"
subject[2] has the value "A complete stranger"

and so we would use:

myExcuse = subject[0] + verb[0] + object[0] to combine the first option of each

Step 3 - Random Numbers

Use this link again: https://www.w3schools.com/code/tryit.asp?filename=FZMJVJIIB29M , but paste in your previously saved code.

For each of the subject, verb and object, we will need to create a random number that will be either 0, 1 or 2 to use for selecting a random option from the arrays.

Use this link: https://www.w3schools.com/code/tryit.asp?filename=FZOLHDIM3XS3 for testing your random selection.

You will need to search the internet to learn how to use the JavaScript Math.random() function to produce 0, 1 or 2.

Step 4 - Adding Style

Paste your code into a W3 Schools 'try it' window. We can add better and/or more options for the subject, verb and object.

We can also add style by adding css code between the <style> and </style> tags.

Remember we can identify elements on the page to style by using:

html elements e.g. body { background-color : pink ; }
classes e.g. .bigWriting {font-size: 60px ;text-aligh : center } (we would need to create a class in our opening html tag e.g. <p class="bigWriting"> )
id e.g. #excuseBox { border: solid red 4px ; border-radius: 10px }

Report abuse