如何在 OnClick 函数小于另一个变量时禁用它

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

本文关键字：变量 另一个 小于 OnClick 函数      更新时间：2023-09-26

大家好，提前感谢您的任何帮助，

我已经有一些功能，第一个每秒添加一次总金额的 1%。 第二个是点击 原始总金额增加了 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");
    }
}

任何帮助将不胜感激！

首先，小提琴不起作用，因为您将其设置为加载 javascript onLoad，这会将您的函数包装在不同的作用域中，因此它们在窗口中不可用。更改它以加载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');    
    }
}

然后你需要在add、minus的末尾调用它，甚至是你在setInterval中定义的函数，以便在添加资金时进行检查。此代码仅将 disabled 属性添加到按钮，因此任何样式都需要通过代码或通过 CSS 以及设置/删除类名或类似内容来处理。

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

相关文章：