一旦它小于另一个变量,如何禁用 onclick 函数?

how to disable onclick function once it is less than another variable?

大家好,感谢您的提前帮助,

我已经有了一些功能,第一个是每秒添加一次总金额的 1%。第二个是 onclick,原始总金额增加了 100 美元。第三个是从总金额中减去 200 美元加上 200 的 10%,因此每次单击它时减去的金额都会增加。 这些功能在我的本地机器上工作,但我无法让它们在 JSFIDDLE.

中工作

我想在总金额小于负金额时禁用减号按钮,并在总金额中有足够的钱使用时再次启用它。

到目前为止,这是我的 JS

setInterval(function () {
    var moneyTotal = document.getElementById('money-total').innerHTML;
    var perSec = (1 / 100) * moneyTotal;
    var moneyNewTotal = (+moneyTotal) + (+perSec);
    document.getElementById('money-total').innerHTML = (moneyNewTotal.toFixed(2));
    document.getElementById('per-second').innerHTML = (perSec.toFixed(2));
}, 1000);

function add() {
    var addAmount = 100;
    var moneyTotal = document.getElementById('money-total').innerHTML;
    var addTotal = (+addAmount) + (+moneyTotal);
    document.getElementById('money-total').innerHTML = (addTotal.toFixed(2));
}

function minus() {
    var cost = document.getElementById('cost').innerHTML;
    var money = document.getElementById('money-total').innerHTML;
    if (money > cost) {
        var moneyNewTotal = (+money) - (+cost);
        var newCost = (10 / 100) * cost;
        var costTotal = (+newCost) + (+cost);
        document.getElementById('cost').innerHTML = Math.ceil(costTotal);
        document.getElementById('money-total').innerHTML = (moneyNewTotal.toFixed(2));
    } else {
        alert("Not enough money");
    }
}

如有任何帮助,我们将不胜感激!

首先,Fiddle 无法正常工作,因为您已将其设置为加载 javascript onLoad,它会将您的函数包装在不同的范围内,因此它们不会在 window 上可用。将其更改为加载 javascript No wrap - in <head>(或 <body>)将有助于它的工作。

然后你需要一些东西来检查值并启用禁用减号按钮。

function checkTotal() {
    var moneyTotal = +document.getElementById('money-total').innerHTML; 
    var cost = +document.getElementById('cost').innerHTML;
    if (cost > moneyTotal) {
        document.getElementById('minus').setAttribute('disabled', 'disabled');    
    } else {
        document.getElementById('minus').removeAttribute('disabled');    
    }
}

然后您需要在 addminus 甚至您在 setInterval 中定义的函数的末尾调用它,以便在添加钱时检查.此代码仅将 disabled 属性添加到按钮,因此任何样式都需要通过代码或通过 CSS 和 setting/removing class 名称或类似名称来处理。

也许有不同的方法可以通过数据绑定或使用事件模型作为框架的一部分来做到这一点,但这些是一个更重要的主题,无法真正涵盖在这个答案中。