3 Replies - 560 Views - Last Post: 24 February 2014 - 10:21 PM

#1 JoePro8011  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 12-July 12

Need help tallying up dice total

Posted 24 February 2014 - 01:06 AM

Having trouble trying to figure out how to keep a counter with each dice roll.


<head>
    <meta charset = "utf-8">
    <title>Roll The Dice</title>
    <link rel = "stylesheet" type = "text/css" href = "dice.css">  


</head>

<body>
    <li>
        <img id = "die1" src = "die1.jpg" alt = "blankImage">
		<img id = "die2" src = "die2.jpg" alt = "blankImage">
    </li>
	<button onclick="rollDice()">Roll Dice</button>
	<h2 id="tally" style="clear:left;"></h2>
	<p id = "totalAmount"style="clear:left;"></p>
	<script type="text/javascript">
	var diceTotal = rollDice();
	
     function rollDice()
    {
    var dieValue1 = Math.floor(1 + Math.random() * 6);
	var dieValue2 = Math.floor(1 + Math.random() * 6);
	var tempTotal = dieValue1 + dieValue2;
    die1.setAttribute("src", "die" + dieValue1 + ".jpg");
    
	die2.setAttribute("src", "die" + dieValue2 + ".jpg");
  
	document.getElementById("tally").innerHTML = "You rolled "+tempTotal;
	return tempTotal;
     }
	document.getElementById("totalAmount").innerHTML = "Total amount " ; //this is where I'm stuck
</script>
	
</body>



It keeps re initializing within the function, and I don't know how to make it "stick" so I can add it outside of it.

Is This A Good Question/Topic? 0
  • +

Replies To: Need help tallying up dice total

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Need help tallying up dice total

Posted 24 February 2014 - 02:07 AM

I’d do that using an object:
var doubleDice = {
  total: 0,
  displayElements: {
    die1:  /* element ref here */,
    die2:  /* element ref here */,
    total: /* element ref here */,
  },

  roll: function() {

    // your dice rolling logic here

    doubleDice.total += dieValue1 + dieValue2;

    // your display logic here

  }
};



PS. there is no need to use setAttribute() in Java­Script at all, you can far easier access the properties directly.
Was This Post Helpful? 1
  • +
  • -

#3 JoePro8011  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 12-July 12

Re: Need help tallying up dice total

Posted 24 February 2014 - 10:15 PM

I don't know much about functions, can you please explain to me about the "displayElements" part in the code? Why is that necessary? It seems redundant. Thank you for the help.

This is what I got so far and it's not working:


<head>
    <meta charset = "utf-8">
    <title>Roll The Dice</title>
    <link rel = "stylesheet" type = "text/css" href = "dice.css">  


</head>

<body>
    <li>
        <img id = "die1" src = "die1.jpg" alt = "blankImage">
		<img id = "die2" src = "die2.jpg" alt = "blankImage">
    </li>
	<button onclick="rollDice()">Roll Dice</button>
	<h2 id="tally" style="clear:left;"></h2>
	<p id = "totalAmount"style="clear:left;"></p>
	<script type="text/javascript">
	var doubleDice = {
  total: 0,
  displayElements: {
    die1:  document.getElementById("die1"),
    die2:  document.getElementById("die2"),
    total: document.getElementById("tally"), //or totalAmount, which counter is this for?
  },

	
     function rollDice()
    {
    var dieValue1 = Math.floor(1 + Math.random() * 6);
	var dieValue2 = Math.floor(1 + Math.random() * 6);
	doubleDice.total += dieValue1 + dieValue2;
	var tempTotal = dieValue1 + dieValue2;
    die1.setAttribute("src", "die" + dieValue1 + ".jpg");
    //dieImg.setAttribute("alt", "dieImg with" + dieValue1 + "spots");
	die2.setAttribute("src", "die" + dieValue2 + ".jpg");
    //dieImg.setAttribute("alt", "dieImg with" + dieValue2 + "spots");
	document.getElementById("tally").innerHTML = "You rolled "+tempTotal;
	
     }
	document.getElementById("totalAmount").innerHTML = "Total: "+doubleDice.total;
</script>
	
</body>





View PostJoePro8011, on 24 February 2014 - 10:13 PM, said:

I don't know much about functions


Meant to say OBJECTS in javascript.
Sorry for double post, couldn't find an edit button.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Need help tallying up dice total

Posted 24 February 2014 - 10:21 PM

Quote

I don't know much about functions, can you please explain to me about the "displayElements" part in the code? Why is that necessary? It seems redundant.

accessing DOM elements is a resource intense operation. therefore it is best practice to do that once and save the resulting reference somewhere and re-use that one.


Quote

This is what I got so far and it's not working

of course not, you’ve got syntax errors (object literal syntax violation). cf. Error Console (F12).


Quote

//or totalAmount, which counter is this for?

whichever you like. if you need one more reference, then add one.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1