Question

我试图在html / javascript程序下面进行此操作。它基本上运行两个计数器，不起作用的功能是重置计数器选项。

＆＃39; initCounter＆＃39;方法使用给定的初始值初始化两个计数器。按下按钮＆＃39; Incr 5＆＃39;，＆＃39; Incr 3＆＃39;将通过＆＃39; 5＆＃39;增加值。或者＆＃39; 3＆＃39;。按下重置按钮应将值重置为零，这是当前没有发生的。

在＆＃39; runCounter＆＃39;方法我正在使用一个可变的＆local.cxt＆＃39;这将具有计数器的当前值。

在＆＃39; reset_fn＆＃39;方法我将＆＃39; localCxt重置为零，但这不起作用，计数器值不会重置为零。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<script type="text/javascript">
var reset_fn;
function runCounter(initVal) {

    var localCxt = initVal;

    reset_fn = function reset() {
        localCxt = 0
    }
    return function (ctr) {
        localCxt += ctr;
        return (localCxt);
    }
}

function initCounter() {
    //get the initial value of the counter
    var val = parseInt(startInput.value);
    if (isNaN(val)){
        val = 0
    }

    ctr5 = runCounter(val);
    ctr3 = runCounter(val);

    document.getElementById("ctr5").disabled = false;
    document.getElementById("ctr3").disabled = false;
    document.getElementById("rst").disabled = false;
    document.getElementById("init").disabled = true;
}

function displayCtr(ctr_val){
    var doc

    if (ctr_val == 5) {
        var val = ctr5(ctr_val)
        doc = document.getElementById("res5");
    }

    if (ctr_val == 3) {
        var val = ctr3(ctr_val)
        doc = document.getElementById("res3");
    }

    doc.innerHTML = val;
}

function resetCnts() {
    doc5 = document.getElementById("res5");
    doc3 = document.getElementById("res3");

    doc5.innerHTML = 0;
    doc3.innerHTML = 0;
    reset_fn();

    document.getElementById("init").disabled = false;
}

function start(){
    document.getElementById("ctr5").disabled = true;
    document.getElementById("ctr3").disabled = true;
    document.getElementById("rst").disabled = true;
}
</script>

</head>

<body onload="start()">
<input type="text" id="startInput" value="0">
<button id="init" onclick="initCounter()">Initilaize</button>
<button id="ctr5" onclick="displayCtr(5)">Incr 5</button>
<button id="ctr3" onclick="displayCtr(3)">Incr 3</button>
<button id="rst" onclick="resetCnts()">reset</button>
<div id="res5" class="cl5">_</div>
<div id="res3" class="cl3">_</div>
</body>
</html>

Answer 1

有一个全局reset_fn，每次调用runCounter函数时都会被覆盖。

我建议你重新考虑你的设计吗？保留对象内部的所有内容，如下所示：

function Counter(value){
    this.context=value;
    this.reset = function() {this.context=0};
    this.addVal = function(val) {this.context+=val};
}

然后创建var ctr5 = new Counter(5)并转到ctr5.reset()和ctr5.addVal(ctr_val)

您也可以将所有文档元素封装在同一个对象中。

更新：如注释中所建议，您可以使用其原型向类添加方法：

function Counter(value){
  this.context = value;
}
Counter.prototype = {
   reset: function() {this.context = 0},
   addVal: function(val) {this.context += val}
};

重点是，使用一个对象来解决这个问题。 Javascript中有很多方法可以创建对象并向其添加属性和方法，您可以轻松地使用Google。

JavaScript：使用闭包变量

1 个答案: