Question

Rewrite the Dice example (that rolls 4 dice simultaneously) to roll 10 dice instead, using arrays...

Rewrite the Dice example (that rolls 4 dice simultaneously) to roll 10 dice instead, using arrays. (html and javascript)

  • Define an array of 10 elements called "imgObjects" where each element is an object reference to one of the html elements.
  • Define an array of 6 string elements called "imgFileNames" where each element is a file name,
    • for example, the value in imgFileNames[0] would be "die1.png"
  • Rewrite function rollDice, to accept an array as the argument and use a for..in loop in the function to call setImage function for each element of the array.
  • Make other necessary changes to your script.

Previous Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Math Random</title>

<style type="text/css">

</style>

<script type="text/javascript">

      //Browser skips function definition

      function start(){

        var rollbtn = document.getElementById("rollButton");

        //Variables that reference the Images in the body. They reference them by their unique ID

        img1 = document.getElementById("d1");

        img2 = document.getElementById("d2");

        img3 = document.getElementById("d3");

        img4 = document.getElementById("d4");

        //img1.setAttribute("src", "Dice2.png");

        //document.writeln("<p>",img1.getAttribute("src") , "</p>")

        rollbtn.addEventListener("click", rollDice, false);

      }

      function rollDice(){

        setImage(img1);

        setImage(img2);

        setImage(img3);

        setImage(img4);

      }

      function setImage(dieImg){

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

        dieImg.setAttribute("src", "Dice"+dieValue+".png");

      }

      var img1;

      var img2;

      var img3;

      var img4;

      //Event listeners that waits for page to load before starting javascript

      window.addEventListener("load", start, false);

      

      //Event listener that executes dice roll when the button is clicked

      //Ignore third argument ("False") on the EventListener function because not covered in this class

      button.addEventListener("click", rollDice, false);

      

      /*for (var i = 0; i<10 ; i++){

        //Multiply math.random by an upper bound in order to get random numbers in a range. Multiply by 10 to get numbers between 0-9. Multiply by 7 to get numbers between 0-6

        //parseInt truncates all decimals and you are left with just integers

        //document.writeln("<p>", parseInt(math.random()* 10), "</p>");//Numbers from 0-9

        document.writeln("<p>", parseInt((math.random()* 6) + 1), "</p>");//Numbers from 1-6

      }*/

      

    </script>

</head>

<body>

    <img id="d1" src="">

    <img id="d2" src="">

    <img id="d3" src="">

    <img id="d4" src="">

    <form action="#">

      <button id="rollButton" type="button">Roll Dice

    </form>

</body>

</html>

    

0 0
Add a comment Improve this question Transcribed image text
Answer #1

We create new arrays imgObjects and imgFileNames and use loops to store the objects and file names in them respectively. We also create a new function, diceRoll, which we add to the addEventListener function, because you cannot have a parametrized function in an event listener. So we use a parameter-less function called diceRoll, which then calls rollDice, passing the array of images as a parameter. Please have a look at the modified code below. There are lots of comments to help you understand it. All the best!

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Math Random</title>

<style type="text/css">

</style>

<script type="text/javascript">

//Browser skips function definition

function start() {

var rollbtn = document.getElementById("rollButton");

//Variables that reference the Images in the body. They reference them by their unique ID

// Create an imgObjects array to store images by element ID
imgObjects = [];
var i;
// Loop to 10 and store to array
for (i = 1; i <= 10; i++) {
img = document.getElementById("d" + i);
imgObjects[i-1] = img;
}

imgFileNames = [];
// Loop to 6 and store file names
for (i = 1; i <= 6; i++) {
filename = "Dice" + i + ".png";
imgFileNames[i-1] = filename;
}

//img1.setAttribute("src", "Dice2.png");

//document.writeln("<p>",img1.getAttribute("src") , "</p>")

rollbtn.addEventListener("click", diceRoll, false);

}

// Receiver function for EventListener which calls rollDice with array as parameter
function diceRoll(){
rollDice(imgObjects);
}

function rollDice(imageArr) {

var img;
// Iterate over array and call setImage
for (img in imageArr) {
// img here is the index in the array
setImage(imageArr[img]);
}

}

function setImage(dieImg) {

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

// Set attribute - get image file name from array imgFileNames
dieImg.setAttribute("src", imgFileNames[dieValue - 1]);

}

var imgObjects;
var imgFileNames;

//Event listeners that waits for page to load before starting javascript

window.addEventListener("load", start, false);

//Event listener that executes dice roll when the button is clicked

//Ignore third argument ("False") on the EventListener function because not covered in this class

button.addEventListener("click", diceRoll, false);

/*for (var i = 0; i<10 ; i++){
  
//Multiply math.random by an upper bound in order to get random numbers in a range. Multiply by 10 to get numbers between 0-9. Multiply by 7 to get numbers between 0-6
  
//parseInt truncates all decimals and you are left with just integers
  
//document.writeln("<p>", parseInt(math.random()* 10), "</p>");//Numbers from 0-9
  
document.writeln("<p>", parseInt((math.random()* 6) + 1), "</p>");//Numbers from 1-6
  
}*/

</script>

</head>

<body>

<img id="d1" src="">

<img id="d2" src="">

<img id="d3" src="">

<img id="d4" src="">

<img id="d5" src="">

<img id="d6" src="">

<img id="d7" src="">

<img id="d8" src="">

<img id="d9" src="">

<img id="d10" src="">

<form action="#">

<button id="rollButton" type="button">Roll Dice

</form>

</body>

</html>

Add a comment
Know the answer?
Add Answer to:
Rewrite the Dice example (that rolls 4 dice simultaneously) to roll 10 dice instead, using arrays...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of...

    Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of moves made. Solving the Hanoi tower. Please post correct Javascript. This is used in jsfiddle. HTML: html> <schript src="TowerOfHanoi.js"</script> </script> <h1> Tower of Hanoi </h1> Enter the number of disks (Disk amount must be < 7): <br> <br> <input id = 'uInput' type = 'textbox' size = 10 > <button id = 'setup' onClick = 'insertDisks()'> Set up Tower of Hanoi </button> <button id=calc onClick = 'runHanoi(stackA,...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • Please advise what is being doing wrong. Requirement. See if you can modify the code of...

    Please advise what is being doing wrong. Requirement. See if you can modify the code of Listings 17.1 and 17.3 to present a message to the user while waiting for an Ajax request to complete. //Code <!DOCTYPE html> <html> <head> <title>Keywords Grabber</title> <script src="myAjaxLib.js"></script> <script> function display(content) { document.getElementById("displaydiv").innerHTML = content; </script> <script> function getXMLHttpRequest() { try { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return new ActiveXObject("Msxml2.XMLHTTP"); } } catch(e) { return new XMLHttpRequest(); } } function doAjax(url,...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • Write a html javascript program to do the following: the user inputs a number, for example,...

    Write a html javascript program to do the following: the user inputs a number, for example, 50 user presses a button, labeled START the program creates 50 random buttons around the browser window each button should be placed at a random location each button should be labeled with a random number between 1 and 50 add the following features every 2 seconds, move each button around by increment or decrementing its location if the user clicks on a button, change...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • Given a starting sphere code, modify the Java and HTML code to create multiple spheres that...

    Given a starting sphere code, modify the Java and HTML code to create multiple spheres that will rotate in different positions at different speeds. basicSphere.js: "use strict"; var canvas; var gl; var numTimesToSubdivide = 3; var index = 0; var pointsArray = []; var va = vec4(0.0, 0.0, -1.0,1); var vb = vec4(0.0, 0.942809, 0.333333, 1); var vc = vec4(-0.816497, -0.471405, 0.333333, 1); var vd = vec4(0.816497, -0.471405, 0.333333,1); var program; var program1; function triangle(a, b, c) {    pointsArray.push(a);...

  • Question 1: Given the following HTML code segment <p>While this is a <b> very basic HTML...

    Question 1: Given the following HTML code segment <p>While this is a <b> very basic HTML document </b>, it actually serves as a detailed example of the document object model. </p> How many text nodes will be added to the DOM tree to represent the structure of text content in this HTML code segment A. 1 B. 2 C. 3 D. 4 Question 2: Assume in an HTML document named “index.html”, the following <script> element is added <script src="grocery.js"></script> This...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT