JavaScript动态传递值至进度条：点击事件触发后进度条不更新

我帮你排查了代码里的几个核心问题，这就是进度条没法动态更新的原因：

• 全局变量的this使用错误：你定义的neededDonationValue、maxDonationValue、progressBarValue都是全局变量，直接用变量名访问即可，函数里的this指向会和全局作用域的this不一致（比如点击按钮触发函数时，this指向按钮元素），导致你没法正确获取/修改全局变量。
• 字符串拼接而非数值计算：输入框获取的value是字符串类型，直接和progressBarValue相加会变成字符串拼接（比如输入100会得到"100450"，而不是预期的550），必须先转成数字再计算。
• 缺失进度条的最终更新步骤：你计算出新的捐赠值后，没有把它同步到全局的progressBarValue，也没有重新设置进度条的value属性，所以页面上看不到变化。

下面是修正后的完整代码：

var neededDonationValue = 150;
var maxDonationValue = 600;
var progressBarValue = 450;

// 初始化页面内容
document.getElementById("donationGoal").innerHTML = "$" + neededDonationValue + " needed to complete funding";
document.getElementById("donation-progress").value = progressBarValue;

function func() {
    // 获取输入值并转成数字
    const inputDonation = Number(document.getElementById("donation-input").value);
    
    // 处理输入为0的情况
    if (inputDonation === 0) {
        document.getElementById("donationGoal").innerHTML = "Please enter an amount to continue";
        return; // 直接返回，不执行后续逻辑
    }
    
    // 计算新的捐赠总额和剩余需求
    const newDonationValue = progressBarValue + inputDonation;
    const newDonationNeededValue = maxDonationValue - newDonationValue;
    
    // 更新全局进度值和页面进度条
    progressBarValue = newDonationValue;
    document.getElementById("donation-progress").value = progressBarValue;
    
    // 更新剩余需求文本
    document.getElementById("donationGoal").innerHTML = "$" + newDonationNeededValue + " needed to complete funding";
    
    // 检查是否达到目标
    if (newDonationValue >= maxDonationValue) {
        document.getElementById("time-left").innerHTML = "We have reached our goal ";
        document.getElementById("donationGoal").innerHTML = "$ 0 needed to complete funding";
        document.getElementById("donation-input").disabled = true;
    }
}

关键修正说明： #

1. 去掉了所有不必要的this，直接使用全局变量名访问。
2. 用Number()把输入框的值转成数字，确保数值计算正确。
3. 计算完newDonationValue后，立刻更新全局的progressBarValue，同时同步设置进度条的value属性，让页面实时显示最新进度。
4. 把输入为0的判断逻辑提前，减少不必要的计算，代码更清晰。

内容的提问来源于stack exchange，提问作者cnico