如何显示指定结果中的单词

Question

我无法在屏幕上显示文字。我想要结果 1,2,3,4,5,6,7,8,9,10 那么它是 Fail 和 11,12,13,14,15,16,17,18 这是真的，但我不是专家家庭。有人帮我吗？对不起，如果你很难理解，因为我使用谷歌翻译。这是我的代码

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>

Answer 1

我建议创建一个数组rollResults 来包含滚动每个骰子的结果。

然后我们可以得到总分，使用 Array.reduce() 将滚动结果加在一起。

然后我们将输出单个骰子以及总数以及掷骰是否成功（例如，如果它> 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>

Answer 2

您可以简单地总结这些值并使用它

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

您可以改为使用此结果在 UI 中放置您想要的任何内容

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

Answer 3

根据image，似乎（并因此假设）目标是显示每个单独的骰子。相反，数字被添加和呈现。

请替换这个：

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

有了这个：

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

或者，正如星展银行在下面的评论中所建议的，我们可以像这样使用Template Strings：

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

上述任何一种方法都会在每个掷骰结果之间引入,（“逗号”）。如果不需要“逗号”，您可以使用空格。

另外：如果目标是在总数为 1、2、...10 时显示“失败”，如果总数为 11、12、...18 时显示“真”，那么试试这个：

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