Estoy haciendo una aplicación de lanzamiento de monedas aquí, todo funciona bien excepto esta parte donde coinTossResult() muestra cruz en resultText.innerHTML , mientras que cuando inicio sesión en la consola en la siguiente línea, muestra cabeza. De lo contrario, cuando coinTossResult() muestra cruz en resultText.innerHTML , coincide con console.log. No tengo idea de por qué está sucediendo.

 resultText.innerHTML = `The Computer chose ${compChoice} and it is a ${(coinTossResult())}` console.log(compChoice, coinTossResult());

Aquí está mi código completo:

 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]; resultText.innerHTML = `The Computer chose ${compChoice} and it is a ${(coinTossResult())}` console.log(compChoice, coinTossResult()); }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'; } resultText.innerHTML = `The Player chose ${playerChoice} and it is a ${coinTossResult()}` if(playerChoice === coinTossResult()){ 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();