I learn JavaScript - Part 4 - DOM Dice Role
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
at the end.
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.