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>

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'}`;

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"