Question

在开发一个简单的javascript游戏时，我面临以下问题。

下面是代码：

全局变量定义：

    {% for assignment in assignments %}
        <p>{{ assignment.title }}</p>
    {% empty %}
        <p>No assignments available</p>
    {% endfor %}

通过按钮

var player1score,player2score= 0;
var activePlayer = '1';

调用

rollDice 函数。

click event

//下面的函数从rollDice中调用，并根据传递的当前值显示一个警报框

var rollDice = function(){

var randomNumber = Math.floor((Math.random() * 7) + 0);
var currentscore = newscore(randomNumber);
console.log("randomNumber",randomNumber);


    if(activePlayer === '1'){      
        document.querySelector("#player1_currentscore").innerHTML = randomNumber;       
    }else if(activePlayer === '2'){             
        document.querySelector("#player2_currentscore").innerHTML = randomNumber;          
    }   

   //below function displays an alert box based on currentscore value .    
   checkwhowins(currentscore);     

}

问题：

我观察到的是，当function checkwhowins(currentscore){ if(currentscore >= 15 ){ //console.log('inside if condition '); alert('Congratulations Player '+activePlayer+' !!!! , You are a winner with a score of '+currentscore); } }方法可以显示警告框时，在rollDice函数中进行的DOM操作不起作用。
意思是：

checkwhowins

不显示当前值为零。

但是当检查方式 不显示提醒框时，

document.querySelector("#player2_currentscore").innerHTML = randomNumber;有效，并且currentscore获得更新的值

为什么会发生这种现象？

我真的听不懂。

为什么调用Alert函数时DOM无法更新？

Answer 1

我不确定可能会发生什么，但我会尝试延迟chekwhowins将其包装在超时范围内：

setTimeout( () => checkwhowins(currentscore) , 1000);  // one second delay

我想这会让DOM更新。

JavaScript中的DOM操作和警报功能行为

1 个答案: