Question: Javascript/HTML I'm making a yachtzee style program. Basically there is 6 dice (d0,d1,d2,d3,d4,d5) all held in an array called diceValues. When ever you click roll,

Javascript/HTML

I'm making a yachtzee style program. Basically there is 6 dice (d0,d1,d2,d3,d4,d5) all held in an array called diceValues. When ever you click roll, the 6 dice randomly generate a number between 1 and 6 by calling the getRandomInt function (which works). However, whenever you roll the dice I have a function called rollDice() which is what puts values into the diceValue array for each dice as well as print off the 6 randomly generated dice. Another thing it does is heldValues which is started off as an array of false (heldValues = (false, false, false, false, false, false). When clicked upon, the certain dice thats clicked on is turned highlighted green and selected as held. What I also need to do is when ever a user clicks on any of the dice during the roll to "hold" the values, then whenever the user clicks roll, the dice that are held, stay the same value and the other dice randomly generate again.

Example:

diceValues = (0, 0, 0, 0 ,0, 0)

heldValues = (false, false, false, false, false, false)

user clicks roll - getrandomint creates 6 numbers

diceValues = (2, 4, 6, 1, 4, 1)

user clicks on d1, and d4 to be held

heldValues should change to = (false, true, false, false, true, false)

and whenever the user clicks roll again the 2 true values should stay the same

diceValues = (3, 4, 2, 5, 4, 6)

here's my sample code EVERYTHING WORKS BESIDES THE rollDice() function

 function toggleHold() { console.log("In toggleHold!"); console.log("In toggleHold, src = "+this.src); console.log("In toggleHold, src = "+this.id); var toggle = doToggle(this.id, this.src); this.src = toggle; } //  // pre-condition: path is in the form of:  // http://www.cs.uky.edu/~paul/CS316/P2/X.png  // -or-  // http://www.cs.uky.edu/~paul/CS316/P2/Xgreen.png  //  // where X is a number from 1-6.  //  // post-condition: If ...X.png then return ...Xgreen.png,  // otherwise return ...X.png.  //  function doToggle(id,path) { var newPath = path; var pathArray = path.split("/"); var pathSize = pathArray.length; var currFile = pathArray[pathSize-1]; // currFile will be in two forms: "X.png" or "Xgreen.png"  var fileName = currFile.split("."); // fileName will be an array (size 2) either "X" or "Xgreen" and "png".   var res = fileName[0].match(/green/); if (res == null) { // currently not on HOLD  heldValues[id[1]] = true; newPath = defaultPath+fileName[0]+"green."+fileName[1]; } else { heldValues[id[1]] = false; newPath = defaultPath + fileName[0][0] +"."+fileName[1]; } // debugHeld();  return newPath; } function debugHeld() { var i = 0; for (i = 0 ; i heldValues.length; i++) { console.log("I "+i+" = "+heldValues[i]); } } function Roll() { // console.log("Inside Roll() "+currentRoll);  var rollB = document.getElementById("Roll"); // roll dice, update images, modify Roll button;  currentRoll += 1; rollDice(currentRoll); rollB.innerHTML = "Roll("+currentRoll+")"; rollB.nodeValue = currentRoll; if (currentRoll == MAXROLLS) { rollB.style.color = "black"; rollB.onclick = noClick; newMessage("Out of Rolls, choose a scoring option."); return; } newMessage((MAXROLLS-currentRoll)+" roll(s) remaining."); } function newMessage(aMessage) { document.getElementById("gameMessage").innerHTML = aMessage; } function noClick() { // console.log("No more rolls!");  } function rollDice() { var p = 0; console.log("In rollDice()"); //THIS FOR LOOP IS WHERE CODE NEEDS TO BE for (p = 0 ; p diceValues.length; p++) { //check heldvalues to see if the die needs to be rolled..  // etc. if so call getRandomInt()....  } // outside for loop, which is wrong.....  // wrong wrong wrong, just an example //THE REST OF THE CODE IN THIS FUNCTION IS JUST AN EXAMPLE  rand = getRandomInt(); madeupRoll = rand; firstDie = document.getElementById("d0"); firstDie.src = "http://www.cs.uky.edu/~paul/CS316/P2/"+madeupRoll+".png"; // "http://www.cs.uky.edu/~paul/CS316/P2/"+madeupRoll+"green.png";  //    } function getRandomInt() { var randNum = 0; min = Math.ceil(1); max = Math.floor(6); randNum = Math.floor(Math.random()*(max - min + 1) + min); // redacted (one line!) You should make sure it is correct!  // console.log("Random = ", randNum);  return randNum; } 

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!