抛硬币应用中coinTossResult()不同调用位置返回值不一致问题

你遇到的不一致问题是多次调用随机函数导致的重复抛币：

• coinTossResult() 函数每次被调用时都会重新生成随机值，相当于每次调用都独立抛一次硬币
• 你在赋值DOM、打印日志、胜负判定三个场景分别单独调用了该函数，三次返回结果没有关联，自然大概率不一致，只有随机结果刚好重合时才会出现匹配的情况

具体错误点 #

• 电脑逻辑分支：给resultText.innerHTML赋值时调用一次coinTossResult()，console.log打印时又调用一次，相当于连续抛两次硬币，结果可能不同
• 玩家逻辑分支：给resultText.innerHTML赋值时调用一次coinTossResult()，后续胜负判定时又调用一次，会出现显示结果和胜负不匹配的隐藏问题
• 补充小问题：playerChoice和compChoice初始值定义为数组，但后续赋值为字符串，属于不规范写法，可能引发隐藏问题

修复方案 #

每次硬币判定只调用一次coinTossResult()，将返回值存入变量，后续所有场景复用该变量即可。

核心修改片段 #

电脑分支修改

compChoice = options[random];
// 新增：仅调用一次抛币函数，保存结果
const tossResult = coinTossResult();
// 后续全部复用该变量
resultText.innerHTML = `The Computer chose ${compChoice} and it is a ${tossResult}`
console.log(compChoice, tossResult);

玩家分支修改

playerChoice = e.classList.contains('head') ? 'head' : 'tails';
// 新增：仅调用一次抛币函数，保存结果
const tossResult = coinTossResult();
resultText.innerHTML = `The Player chose ${playerChoice} and it is a ${tossResult}`
if(playerChoice === tossResult){
    tossWinText.innerHTML = 'Player has won the Toss';
}else{
    tossWinText.innerHTML = 'Computer has won the Toss';
}

完整修复后代码 #

const btnChoices = document.querySelectorAll('.options');
const resultText = document.querySelector('.result-text');
const tossWinText = document.querySelector('.toss-winner');
const turnText = document.querySelector('.turn-text');
const btnArea = document.querySelector('.buttons');
// 修正初始值类型为字符串
let playerChoice = '';
let compChoice = '';


function whoseTurn(){
if(Math.floor(Math.random() * 2) === 0){
    turnText.innerHTML = 'Computer will flip the coin';
    btnArea.style.display = "none";
    const options = ['head', 'tails'];
    const random = Math.floor(Math.random() * options.length);
    compChoice = options[random];
    const tossResult = coinTossResult();
    resultText.innerHTML = `The Computer chose ${compChoice} and it is a ${tossResult}`
    console.log(compChoice, tossResult);
}else{
    turnText.innerHTML = 'Player will flip the coin';
    btnChoices.forEach(function(e){
        e.addEventListener('click', function(){
            if(e.classList.contains('head')){
               playerChoice = 'head';
            }else{
                playerChoice = 'tails';
            }
            const tossResult = coinTossResult();
            resultText.innerHTML = `The Player chose ${playerChoice} and it is a ${tossResult}`
            if(playerChoice === tossResult){
                tossWinText.innerHTML = 'Player has won the Toss';
            }else{
                tossWinText.innerHTML = 'Computer has won the Toss';
            }
        })
        
    })
    
    
}
}
function coinTossResult(){
const opt = ['head', 'tails'];
const ran = Math.floor(Math.random() * opt.length);
const cho = opt[ran];
return cho;
}
whoseTurn();

内容的提问来源于stack exchange，提问作者Mir