JS判断逻辑异常：分数不足时if(score.value >= cCost.value)仍触发执行

• 最核心的问题是你直接对字符串类型的input value做了数值比较：即使input的type设置为number，通过element.value取到的值始终是字符串类型。直接用>=比较两个字符串时，会按字符的Unicode编码逐位对比，比如"2"和"100"比较时，第一个字符'2'的编码大于'1'，所以"2" >= "100"会返回true，触发错误的分支逻辑。
• input的min属性仅对用户手动输入、表单提交时的原生校验生效，不会限制JS代码主动修改value的行为，所以就算设置了min=0，JS赋值负数也不会被拦截。
• 另外还有隐藏的作用域错误：updateNums函数内部直接访问的score、cCost、clickers是addClicker内的局部变量，updateNums的作用域下无法访问这三个变量，执行时会抛出未定义报错。

1. 比较前先将value转换为数值类型 #

可以用parseInt()、Number()或者一元加运算符做转换，推荐提前把需要用到的数值转好再做逻辑处理：

function addClicker() {
    var score = document.querySelector('#score');
    var cCost = document.querySelector('#cCost');
    var clickers = document.querySelector('#clickers');
    // 提前转数值，加进制参数10避免解析异常
    const scoreNum = parseInt(score.value, 10);
    const costNum = parseInt(cCost.value, 10);
    const clickerNum = parseInt(clickers.value, 10);

    if (scoreNum >= costNum) {
        score.value = scoreNum - costNum;
        cCost.value = Math.round(costNum * 1.5);
        clickers.value = clickerNum + 1;
        updateNums(score, clickers, cCost);
    } else {
        alert("You Do Not Have Enough Score To Buy This.");
    }
}

2. 增加负数兜底逻辑 #

如果要保证score不会出现负数，赋值时可以加一层校验：

score.value = Math.max(0, scoreNum - costNum);

3. 修复updateNums的作用域问题 #

把用到的DOM元素当参数传入函数即可，如果你已经在addClicker里更新过三个input的value，这个重复赋值的函数也可以直接删掉：

function updateNums(scoreEl, clickerEl, costEl) {
    document.querySelector('#score').value = scoreEl.value;
    document.querySelector('#clickers').value = clickerEl.value;
    document.querySelector('#cCost').value = costEl.value;
}

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