Question

HTML元素：

<div style="text-align:center;";">
    <input style="align:center;" type="button" value="Roll" onClick='roll()';>
</div>

JavaScript代码段：

function roll(){
    document.getElementById('test5').innerHTML=roll;
    var roll;
    document.getElementById('test').innerHTML=roll;
    if (!(roll == 1 || roll == 2 || roll == 3)){
        document.getElementById('test1').innerHTML='inLoop';
        roll = 1;
    }
    //irrelavent code

    var dice1=dice[0];
    var dice2=dice[1];
    var dice3=dice[2];
    var dice4=dice[3];
    var dice5=dice[4];
    if (roll>=3){
        score(dice1, dice2, dice3, dice4, dice5);
    }
    roll = storeRoll(roll);
    document.getElementById('test4').innerHTML=roll;
};

function storeRoll(roll){
    ++roll
    document.getElementById('test2').innerHTML='inFunction';
    document.getElementById('test3').innerHTML=roll;
    return roll;
};

我正在努力使其如果尚未定义roll，则会将其设置为1并且在函数结束时，它会将1添加到roll。一旦有3个卷，它就会调用 score函数。在我的试验和错误中，似乎roll变量正在变得越来越多每次重启功能时重置。我在用户点击HTML输入按钮时多次执行该功能，因此循环不起作用。每次我点击按钮，roll变量都会重置。我想知道我的代码中是否有重置变量roll的内容。

Answer 1

您的roll变量的范围限定为函数roll()。每次调用该函数时，都会重新创建该变量。如果需要保留roll的值，则需要将其作为函数的全局范围。建议阅读：What is the scope of variables in JavaScript?

有很多方法可以实现这一目标。除最简单之外的所有解决方案都要求您了解Javascript的工作原理。

var timesRolled = 0;

function roll() {
    timesRolled++;
    document.getElementById('test3').innerHTML = timesRolled;

    var dice1=dice[0];
    var dice2=dice[1];
    var dice3=dice[2];
    var dice4=dice[3];
    var dice5=dice[4];

    if (timesRolled >= 3) {
        score(dice1, dice2, dice3, dice4, dice5);
    }
}

function score(){
    // presumably here you will reset the timesRolled to 0, so that another game may be played
}

如果您打算认真编程，我建议您了解有关Javascript的更多信息。

https://developer.mozilla.org/en/learn/javascript

Answer 2

另一个问题是你的函数的名称roll与变量的名称roll相同。

我建议这样做：使用“self”对象作为roll变量的前缀。对于像你这样的情况这样做比使用多个脚本（即使是同一个脚本的两个版本）导致问题和错误的全局变量更好。此外，“self”对象优于“top”或“window”对象（等），因为在应用程序中有多个文档的情况下，每个帧都有一个“self”对象。

function roll(){
    document.getElementById('test5').innerHTML=self.roll;

/* your variable declaration still leaves "roll" undefined, but just makes it a local variable; so you really don't need this second statement here */
    document.getElementById('test').innerHTML=self.roll;

    if (!(self.roll == 1 || self.roll == 2 || self.roll == 3)){
        document.getElementById('test1').innerHTML='inLoop';
/* this is when self.roll first gets initialized */
        self.roll = 1;
    }

你的函数像以前一样继续，但所有对变量roll的引用都应该更改为self.roll。

在Javascript中完成函数后变量删除

2 个答案: