I learn JavaScript - Part 4 - DOM Dice Role

tarekadam (67)in #programming • 8 years ago

In my previous posts I described what I have learned about Variables, Statement, Functions, Objects Conditions and Loops.

In this post I like to share the understanding I gained about the DOM (Document Object Model) and how to use JavaScript to change elements of an HTML document to create a little dice role game.

But first let's clarify what a DOM actually is and what it's used for. In very brief summary the Document Object Model is an API (Application Programming Interface) that can be accessed by JavaScript to

get
change
add
delete

HTML / CSS elements and attributes.

I prepared a little dice game to illustrate the manipulation of html elements using JavaScript. The idea is to generate a random number from 1 - 6 and display the matching dice on the web page.

This is the basic html code I use for the example. It initially just shows a dice image centred (via CSS) on a webpage.

<!DOCTYPE html>
    <html>
      <head>
        <title>Random Dice</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <div class="flex-container">
          <img src="dice-1.png" alt="dice image" class="dice" id="dice">
        </div>
      <script src="app.js"></script>
      </body>
    </html>

Before I show the JavaScript code, let's clarify first what need to be in place for this game to work.

We need to create a Random number from 1 - 6.
The random number need to be assigned to the dice.
Access the dice element on the html page
Replace the actual image with the image of the random number.

Great, lets start with creating a random number in the app.js file and assign it to a dice variable.

The code looks like this.

var dice = Math.floor(Math.random() * 6) + 1;

Math.random creates a random number from 0 - 1. (e.g 0.3567)
This generated number will than be multiplied by 6
Math.floor rounds a number downward to its nearest integer (So that means we get a random number multiplied by 6 (e.g. 0.3567 * 6 = 2.124) and than the returned value is 2.
Since the floor method rounds the result downwards, we would only get numbers from 0 - 5. That is why we need to add
1

With the Random number created we can now write a statement using DOM objects that selects the dice ID from the html page.

var diceDOM = document.getElementById("dice");

A new variable is declared, DiceDOM
document is the main object where all other html elements are under.
getElementById select the id value we set in the html document (dice).

This line basically says: "Go to the html document and get me the id called dice!"

With the dice id selected we can now add a line that changes the dice image based on the outcome of the random number.

diceDOM.src = 'dice-' + dice + '.png';

So this line basically does the following:

Select the image source of the dice id
replace the image based on the random number.

So if we have the dice images saved as dice-1.png till dice-6.png, the random number generated between the string dice- and .png will call the various images.

I did not add a button to click on the page so we can just press the browser refresh button and see that with every refresh the dice should change.

I hope that was helpful. Once I learned more about JS I will share with you.