Clic button - dice - outcome

Authoring Twine
1

Hi,

I am seeking help for snowman 2.0.2.

I am trying to place a clic button to roll a dice. Then a message corresponding to the result have to be display.

For now, I have found a code and been able to set up the dice fonction, but I am struggling to display the message corresponding.

So the following code is working:
< !DOCTYPE html>
< html>
< head>
< style>
div.dice{
float:left;
width:32px;
background:#F5F5F5;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
< /style>
< script>
function rollDice(){
var die1 = document.getElementById(“die1”);
var die2 = document.getElementById(“die2”);
var status = document.getElementById(“status”);
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = “You rolled “+diceTotal+”.”;
if(d1 == d2){
status.innerHTML += " DOUBLES! You get a free turn!!";
}
}
< /script>
< /head>
< body>
< div id=“die1” class=“dice”>0
< div id=“die2” class=“dice”>0
< button onclick=“rollDice()”>Roll Dice
< h2 id=“status” style=“clear:left;”>
< /body>
< /html>

I have try to modify it to display a message corresponding to the result like this:

< !DOCTYPE html>
< html>
< head>
< style>
div.dice{
float:left;
width:32px;
background:#F5F5F5;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
< /style>
< script>
function rollDice(){
var die1 = document.getElementById(“die1”);
var die2 = document.getElementById(“die2”);
var status = document.getElementById(“status”);
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = “You rolled “+diceTotal+”.”;
if(d1 == d2){
status.innerHTML += " DOUBLES! You get a free turn!!";
}
if(d1 + d2 = 2){
status.innerHTML += " outcome 1";
}
if(d1 + d2 = 3){
status.innerHTML += " outcome 2";
}
if(d1 + d2 = 4){
status.innerHTML += " outcome 3";
}
if(d1 + d2 = 5){
status.innerHTML += " outcome 4";
}
if(d1 + d2 = 6){
status.innerHTML += " outcome 5";
}
if(d1 + d2 = 7){
status.innerHTML += " outcome 6";
}
if(d1 + d2 = 8){
status.innerHTML += " outcome 7";
}
if(d1 + d2 = 9){
status.innerHTML += " outcome 8";
}
if(d1 + d2 = 10){
status.innerHTML += " outcome 9";
}
if(d1 + d2 = 11){
status.innerHTML += " outcome 10";
}
if(d1 + d2 = 12){
status.innerHTML += " outcome 11";
}
}
< /script>
< /head>
< body>
< div id=“die1” class=“dice”>0
< div id=“die2” class=“dice”>0
< button onclick=“rollDice()”>Roll Dice
< h2 id=“status” style=“clear:left;”>
< /body>
< /html>

But this one not working … Well if someone have a clue please let me know.

Sorry for a reason I’m not aware of the code is not showing in the right way.
regard

2

If you put three backticks above and below the code it should show correctly.

```
code
```

Or select it and then click the editor icon that looks like an HTML tag.

It looks like you’re not checking for equality correctly. In JavaScript a single = is for setting the value of a variable. == will do a “loose” equality check (converts between numbers and strings and such, sometimes in unexpected ways), and a triple equals (===) will check for exact equality and is usually the one you want to use.

So you want:

if(d1 + d2 === 10) {
	status.innerHTML += "outcome 10";
}

You could also write the whole thing in a shorter form using an array:

let outcomes = [
	"",  // There's no outcome 0...
	" outcome 1",
	" outcome 2",
	" outcome 3",
	...
];
status.innerHTML = outcomes[d1 + d2];
1 Like
3

Great, it does work !

Many thank