对象方法不修改同一对象中的其他属性

Question

我正在尝试设置一个函数，该函数设置一个倒计时，然后在它达到 0 时触发另一个 function/event。我正在 link 使用 HTML 来设置各种按钮选择器，以便能够将倒计时增加 1、2 或 3 个刻度。

问题是我可以通过添加 document.getElementById("timer").innerHTML = myTime.curTime + "/" + myTime.maxTime 让页面显示 min/max 计时器没有问题在 HTML 文档的顶部，但我无法让它更新 curTime，而且 curTime 似乎也从未在对象内部更新。这只是我如何构建它的问题吗？或者我应该以不同的方式处理这个问题？

这是我目前的情况：（link 到 jsfiddle：http://jsfiddle.net/g4Lu3n43/）

//set the initial value of timer
var timerDown = 0

//set up the countdown constructor
function Countdown(name, baseTime, inc) {
    this.name = name;
    this.timer = baseTime;
    this.increment = inc;
    this.maxTime = maxTime();
    this.curTime = curTime();
}

//set up the functions for the Countdown prototype
Countdown.prototype = {
    maxTime: function() {
        return (this.timer + this.increment) * 2;
    },
    curTime: function() {
        return maxTime - timerDown;
    }
}

//set up the function to now de-increment the timer to 0
function deIncrement(numInc) {
    timerDown += numInc;
    if (myTime.curTime <= 0 ) {
    alert("You've run out of time!");
    } else { 
        updateTimer();
    }
}

//set up the countdown object
var myTime = new Countdown("Timer", 10, 2);

//set up the function to update the div on the HTML page
function updateTimer() { 
    var timer = document.getElementById("timer") 
    timer.innerHTML = myTime.curTime + "/" + myTime.maxTime;
}

window.onload = updateTimer();

其中的 HTML 部分：

<div id="timer">Time will go here</div>
<input type="button" id="inc1" onclick="deIncrement(1); return false" value="Coundown by 1">
<input type="button" id="inc2" onclick="deIncrement(2); return false" value="Coundown by 2">
<input type="button" id="inc3" onclick="deIncrement(3); return false" value="Coundown by 3">
<input type="button" id="inc4" onclick="deIncrement(4); return false" value="Coundown by 4">

Answer 1

您的代码存在一些问题...

首先你需要设置一个函数为window.onload，而不是调用函数并将结果放入window.onload。

接下来，正如 briosheje 所说，您不能将 maxTime 作为属性和同一对象的函数（即使您使用的是原型）。每次使用函数获取最新值即可。

请务必使用 this.myFunction()（与 myFunction() 相对）从您当前所在的对象中使用另一个 function/object。

最后，您的 jsFiddle 需要直接在 <head> 元素中运行以便使用 window.onload 和从内联 HTML 属性访问的命名函数（即.deIncrement）。这是页面左上角设置的配置选项。

查看更新后的 jsFiddle：http://jsfiddle.net/g4Lu3n43/2/

对象方法不修改同一对象中的其他属性

object method not modifying other property in the same object

html

javascript

methods

object

对象方法不修改同一对象中的其他 属性

object method not modifying other property in the same object

html

javascript

methods

object

对象方法不修改同一对象中的其他属性