I'm having trouble displaying words on the screen. I want result 1,2,3,4,5,6,7,8,9,10 then it is Fail and 11,12,13,14,15,16,17,18 it is true but I am not expert family. Someone help me please? Sorry if it's hard for you to understand because I use google translate. Here is my code

let images = ["dice-01.svg",
"dice-02.svg",
"dice-03.svg",
"dice-04.svg",
"dice-05.svg",
"dice-06.svg"];
let dice = document.querySelectorAll("img");

function roll(){
    dice.forEach(function(die){
        die.classList.add("shake");
    });
    setTimeout(function(){
        dice.forEach(function(die){
            die.classList.remove("shake");
        });
        let dieOneValue = Math.floor(Math.random()*6);
        let dieTwoValue = Math.floor(Math.random()*6);
        let dieTthreeValue = Math.floor(Math.random()*6);
        console.log(dieOneValue,dieTwoValue);
        document.querySelector("#die-1").setAttribute("src", images[dieOneValue]);
        document.querySelector("#die-2").setAttribute("src", images[dieTwoValue]);
        document.querySelector("#die-3").setAttribute("src", images[dieTthreeValue]);
        document.querySelector("#total").innerHTML = "Your roll is "   ( (dieOneValue  1)   (dieTwoValue   1)    (dieTthreeValue   1) );
    },
    1000
    );
}
roll();

<div id="die-1"></div>
<div id="die-2"></div>
<div id="die-3"></div>
<div id="total"></div>

CodePudding user response：

I'd suggest creating an array rollResults to contain the results of rolling each die.

We can then get the total score, using Array.reduce() to add the roll results together.

We would then output the individual die rolls along with the total and whether the roll was successful (e.g. if it was > 10):

let images = [
    'https://upload.wikimedia.org/wikipedia/commons/0/09/Dice-1.svg',
    'https://upload.wikimedia.org/wikipedia/commons/3/34/Dice-2.svg',
    'https://upload.wikimedia.org/wikipedia/commons/c/ca/Dice-3.svg',
    "https://upload.wikimedia.org/wikipedia/commons/1/16/Dice-4.svg",
    "https://upload.wikimedia.org/wikipedia/commons/d/dc/Dice-5.svg",
    "https://upload.wikimedia.org/wikipedia/commons/1/14/Dice-6.svg"
];

let dice = document.querySelectorAll("img");

function getDieResult() {
    return Math.floor(Math.random() * 6)   1;
}

function roll(){
    dice.forEach(function(die){
        die.classList.add("shake");
    });
    setTimeout(function(){
        dice.forEach(function(die){
            die.classList.remove("shake");
        });
        let rollResults = Array.from({ length: dice.length }, (v,k) => getDieResult());
        let total = rollResults.reduce((total, roll) => total   roll);
        rollResults.forEach((result, idx) => {
            document.querySelector(`#die-${idx 1}`).setAttribute("src", images[result - 1]);
        })
        const success = (total > 10) ? "True": "False"
        document.querySelector("#total").innerHTML = "<br>Your roll is "   rollResults.join(", ")    "<br> Total = "   total;
        document.querySelector("#total").innerHTML  = "<br>Success = "   success;
    },
    250
    );
}
roll();

<img id='die-1' width='50px'>
<img id='die-2' width='50px'>
<img id='die-3' width='50px'>

<div id='total'></div>
<br>
<button onclick='roll()'>Roll the dice!</button>

CodePudding user response：

You can simply sum up the values and use that

const dieSum = (dieOneValue  1)   (dieTwoValue   1)    (dieTthreeValue   1);
let result = (dieSum > 10); // true if <=10 or false if >=11

you can instead use this result in order to put whatever you want in the UI

document.querySelector("#total").innerHTML = dieSum > 10 ? "Pass" : "Fail" 

CodePudding user response：

As per the image it appears (& hence assumed) that the objective is to show each of the individual die-roll. Instead, the numbers are getting added and rendered.

Please replace this:

document.querySelector("#total").innerHTML = "Your roll is "   ( (dieOneValue  1)   (dieTwoValue   1)    (dieTthreeValue   1) );

With this:

document.querySelector("#total").innerHTML = "Your roll is "   (dieOneValue  1)   ', '   (dieTwoValue   1)   ', '    (dieTthreeValue   1);

Or, as suggested by DBS in comment below, we may use Template Strings like this:

document.querySelector("#total").innerHTML = `Your roll is $(dieOneValue  1), $(dieTwoValue   1), $(dieTthreeValue   1)`;

Either of the above methods would introduce a , ('comma') between each die-roll result. If 'comma' is not desired, you may use space.

Also: in case the objective is to display 'fail' if the total is 1, 2, ...10 and 'true' if the total is 11, 12, ... 18, then try this:

document.querySelector("#total").innerHTML = `Your roll is ${(dieOneValue   dieTwoValue   dieTthreeValue   3) < 11 ? 'fail' : 'true'}`;