Rewrite the Dice example (that rolls 4 dice simultaneously) to roll 10 dice instead, using arrays. (html and javascript)
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>
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>
Rewrite the Dice example (that rolls 4 dice simultaneously) to roll 10 dice instead, using arrays...
<!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 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 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 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 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, 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 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 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 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...