JavaScript无法获取HTML表单值完成费用计算问题求助

问题表现 #

实现简单快递费用计算功能时，代码运行无报错，但功能不生效。目前clear按钮功能正常，但输入KG数值、选择对应目的地选项后，点击calculate按钮无法完成计算，无任何响应。

原始问题代码 #

<script type="text/javascript">
    var bwm = 7.9;
    var bswk = 14;
    var bsbh = 15;
    var wm = 2;
    var swk = 11;
    var sbh = 12;
    var kilo, overkilo, f;
    var s = document.getElementById('place');
    var place = s.options[s.selectedIndex].value;
    var k = document.getElementById('kilo').value;
    var tot;

    function quote() {
        f = document.getElementById('theform');
        f.reset();

        document.getElementById('calc').onclick = function() {
            if (place == 'swk') {
                (k * swk) + bswk = tot;

            } else if (place == 'sbh') {
                (k * sbh) + bsbh = tot;

            } else {
                (k * wm) + bwm = tot;

            }
            document.getElementById('tot').value = 'RM  ' + parseFloat;
        }

    }
</script>

<form id="theform" action="#">
    <div>
        <label for="place">Choose Destination :</label>
        <select id="place" onChange="quote()">
            <option value="swk">Sarawak</option>
            <option value="sbh">Sabah</option>
            <option value="wm">WestMalaysia</option>
        </select>
    </div>
    <div>
        <label for="kilo">Amount of KG :</label>
        <input id="kilo" type="text">
    </div>
    <div>
        <label>Total :</label>
        <input id="tot" type="text" readonly="readonly">
    </div>
    <div>
        <label></label>
        <input id="calc" type="button" value="calculate">
        <input id="r" type="reset" value="clear">
    </div>
</form>

问题根因 #

代码存在6处核心逻辑错误，直接导致功能失效：

• 赋值方向写反：JS中=运算符的作用是将右侧的值赋给左侧的变量，原代码将计算表达式写在左侧、待赋值变量写在右侧，完全不符合语法逻辑，无法存储计算结果。
• 取值时机错误：目的地、重量的取值逻辑在页面初始加载时就执行了，此时用户还未输入内容、选择选项，拿到的是空值或默认值，后续用户修改表单内容时这两个变量不会同步更新。
• 错误的重置逻辑：将表单重置逻辑写在下拉选框的onChange触发函数中，用户一选择目的地就会清空整个表单，刚输入的重量、选择的目的地都会被清除。
• 事件绑定时机错误：计算按钮的点击事件绑定逻辑写在quote函数内部，页面首次加载完成时计算按钮没有绑定任何事件，第一次触发下拉选择前点击计算按钮不会有任何响应。
• 数值解析逻辑错误：给总价输入框赋值时直接拼接了parseFloat函数本身，没有传入参数调用该函数，无法输出正确的数值结果。
• 缺少类型校验：从输入框获取的重量值是字符串类型，虽然JS做隐式转换可以计算，但遇到非数字输入时会直接返回NaN，没有做基础的合法性校验。

修复后可运行代码 #

<script type="text/javascript">
    // 各地区基础运费、每公斤单价配置
    const baseWestMsia = 7.9;
    const baseSarawak = 14;
    const baseSabah = 15;
    const priceWestMsia = 2;
    const priceSarawak = 11;
    const priceSabah = 12;

    // 页面加载完成后直接绑定计算按钮事件
    window.onload = function() {
        document.getElementById('calc').onclick = function() {
            // 点击计算时实时读取最新表单值
            const placeSelect = document.getElementById('place');
            const selectedPlace = placeSelect.options[placeSelect.selectedIndex].value;
            const kiloVal = document.getElementById('kilo').value;
            const kilo = parseFloat(kiloVal);
            
            // 输入合法性校验
            if (isNaN(kilo) || kilo <= 0) {
                alert('请输入有效的正重量数值');
                document.getElementById('kilo').focus();
                return;
            }

            let total = 0;
            // 按目的地匹配计算规则
            if (selectedPlace === 'swk') {
                total = kilo * priceSarawak + baseSarawak;
            } else if (selectedPlace === 'sbh') {
                total = kilo * priceSabah + baseSabah;
            } else {
                total = kilo * priceWestMsia + baseWestMsia;
            }

            // 保留两位小数显示总价
            document.getElementById('tot').value = `RM ${total.toFixed(2)}`;
        }
    }
</script>

<form id="theform" action="#">
    <div>
        <label for="place">Choose Destination :</label>
        <select id="place">
            <option value="swk">Sarawak</option>
            <option value="sbh">Sabah</option>
            <option value="wm">WestMalaysia</option>
        </select>
    </div>
    <div>
        <label for="kilo">Amount of KG :</label>
        <input id="kilo" type="text">
    </div>
    <div>
        <label>Total :</label>
        <input id="tot" type="text" readonly="readonly">
    </div>
    <div>
        <label></label>
        <input id="calc" type="button" value="calculate">
        <input id="r" type="reset" value="clear">
    </div>
</form>

修复点说明 #

• 移除了下拉选框上不必要的onChange触发逻辑，不再在选择目的地时错误重置表单，保留原生reset按钮的清空功能。
• 调整取值时机，仅在用户点击计算按钮时才读取最新的表单值，保证拿到的是用户最新输入的内容。
• 修正赋值方向，将计算结果正确赋值给总价变量。
• 调整事件绑定时机，页面加载完成后就给计算按钮绑定点击事件，无需先操作下拉框即可触发计算。
• 增加输入合法性校验，输入非数字、负数或0时给出提示，避免出现异常结果。
• 修正数值显示逻辑，计算完成后保留两位小数，符合货币显示的常规习惯。

内容的提问来源于stack exchange，提问作者H. Ryuutoku