JavaScript条件语句错误：价格增减计算功能无法实现求助

原代码核心问题 #

1. 错误赋值而非取值：你直接给movement下拉框强制赋值"Increase"和"Rollback"，而非获取用户当前选中的选项值
2. 条件判断用赋值运算符：if (increase = "Increase")里的=是赋值操作，不是比较运算符，导致该条件永远为真，后续rollback的判断也会执行，直接覆盖前一个计算结果
3. 无非法输入处理：未处理用户未输入有效数字、未选择操作类型的场景

修正后的代码 #

HTML（原结构无需修改）

<div class="mb-3 row">
    <label class="col-sm-4 col-form-label">Current Price:</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" id="current_price" name="current_price" placeholder="Enter Current Price" onkeyup="movement()" required>
    </div>
</div>
<div class="mb-3 mt-2 row">
    <label class="col-sm-4 col-form-label">Movement:</label>
    <div class="col-sm-8">
        <select class="form-select" id="movement" name="movement" onchange="movement()" required>
            <option value="">--Select Movement--</option>
            <option value="Increase">Increase</option>
            <option value="Rollback">Rollback</option>
        </select>
    </div>
</div>
<div class="mb-3 row">
    <label class="col-sm-4 col-form-label">Price Movement:</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" id="price_movement" name="price_movement" onkeyup="movement()" placeholder="Enter Price Movement" required>
    </div>
</div>
<div class="mb-2 row">
    <label class="col-sm-4 col-form-label">New Price:</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" style="font-weight: bold;" id="new_price" name="new_price" placeholder="New Price" required>
    </div>
</div>

修正后的JavaScript

function movement(){
    // 获取用户当前选中的操作类型
    const movementType = document.getElementById('movement').value;
    // 转换输入为数字（用parseFloat支持小数价格）
    const currentPrice = parseFloat(document.getElementById('current_price').value);
    const priceMovement = parseFloat(document.getElementById('price_movement').value);
    const newPriceInput = document.getElementById('new_price');

    // 清空结果，处理未选择操作或非法输入的情况
    newPriceInput.value = '';

    // 校验输入有效性
    if (isNaN(currentPrice) || isNaN(priceMovement) || !movementType) {
        return;
    }

    // 根据操作类型执行对应计算
    if (movementType === "Increase") {
        newPriceInput.value = currentPrice + priceMovement;
    } else if (movementType === "Rollback") {
        newPriceInput.value = currentPrice - priceMovement;
    }
}

修正说明 #

1. 正确获取选中值：用movementType存储下拉框当前选中的真实值，不再强制赋值
2. 严格相等判断：用===做条件比较，确保逻辑判断准确
3. 支持小数价格：改用parseFloat替代parseInt，适配带小数的价格场景
4. 增加合法性校验：提前过滤无效输入，避免非法计算
5. 逻辑优化：用else if确保同一时间只执行一种计算逻辑，不会出现结果覆盖

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