租车计算器页面加载时显示NaN，无法自动计算问题求助

页面加载时无法自动计算出正确价格，核心问题在于**leaseVal变量在页面初始化时未被赋值**，导致计算时出现NaN：

1. 你定义了let leaseVal;但没有初始值，只有在单选按钮的change事件触发时才会给它赋值。虽然默认选中了12个月的单选框，但页面加载时并没有触发这个change事件，所以leaseVal始终是undefined，代入计算后自然得到NaN。
2. 另外你的代码存在重复绑定事件、变量拼写错误（比如leaseLenght应该是leaseLength）、以及初始化逻辑分散的问题，这些也会导致初始化时的计算逻辑失效。

下面是调整后的代码，核心是在页面初始化时就根据默认选中的单选框给leaseVal和leaseLength赋值，同时清理冗余的事件绑定：

<body> 
    <div id="calculator">
        <div class="resultat">
            <label for="LeaseValue_html">Pris pr. mdr. inkl. moms </label> 
            <input type="text" id="LeaseValue_html" value="2500" readonly="true">
        </div>      
        <div class='py'>
            <label for="lp" class="LeasingPeriodeCSS">Vælg leasingperiode</label>
            </br>
            <label id="label12">
                <input id="leasingRadio12" type="radio" value="12" class="option-input radio" name="example" checked />
                12 mdr
            </label>
            <label id="label24">
                <input id="leasingRadio24" type="radio" value="24" class="option-input radio" name="example" />
                24 mdr
            </label>
            <label id="label36">
                <input id="leasingRadio36" type="radio" value="36" class="option-input radio" name="example" />
                36 mdr
            </label>
        </div>
        </br>
        <div class="range-control">
            <input id="inputRange" type="range" min="15000" max="35000" step="5000" value="15000" data-thumbwidth="20">
            <label> Km pr. år.:</label><p id="kmSliderValue" class="SliderResultat"> </p>
        </div>
        <div class="range-control">
            <input id="inputRange1" type="range" min="10" max="60" step="5" value="10" data-thumbwidth="20">
            <label> Ubetaling:</label><p id="downPaymentValue"class="SliderResultat"> </p>
        </div>

<script>
$(document).ready(function() {
    // 缓存DOM元素，避免重复查询
    const $leasingRadios = $('input[type=radio][name=example]');
    const $inputRange = $('#inputRange');
    const $inputRange1 = $('#inputRange1');
    const $leaseValueHtml = $('#LeaseValue_html');
    const $downPaymentValue = $('#downPaymentValue');
    const $kmValue = $('#kmSliderValue');
    
    const total12 = parseFloat(document.getElementById('custom-field-1').innerHTML);
    const total24 = parseFloat(document.getElementById('custom-field-2').innerHTML);
    const total36 = parseFloat(document.getElementById('custom-field-3').innerHTML);
    
    let leaseVal;
    let leaseLength;

    // 初始化单选框显示状态
    $('#label12').toggle(total12 > 0);
    $('#label24').toggle(total24 > 0);
    $('#label36').toggle(total36 > 0);

    // 初始化选中的单选框对应的值
    function initLeaseValues() {
        const checkedRadio = $leasingRadios.filter(':checked')[0];
        if (checkedRadio) {
            const value = checkedRadio.value;
            leaseLength = value;
            switch(value) {
                case '12':
                    leaseVal = total12;
                    break;
                case '24':
                    leaseVal = total24;
                    break;
                case '36':
                    leaseVal = total36;
                    break;
            }
        }
    }

    // 计算逻辑封装
    function calculateTotal() {
        // 确保leaseVal已初始化，避免NaN
        if (!leaseVal) return;
        
        const inputRange1Value = parseInt($inputRange1.val(), 10);
        const inputRangeValue = parseInt($inputRange.val(), 10);
        
        const downPayment = (inputRange1Value / 100) * leaseVal;
        const kmSlider = inputRangeValue;
        
        let total = (leaseVal - downPayment) / leaseLength + (kmSlider - 15000) / leaseLength;
        total = Math.round(total); // 直接取整，和toFixed(0)效果一致
        const formattedDownPayment = downPayment.toLocaleString() + "kr";
        const formattedKm = kmSlider.toLocaleString() + "km";
        
        $leaseValueHtml.val(total);
        $downPaymentValue.text(formattedDownPayment);
        $kmValue.text(formattedKm);
    }

    // 绑定事件
    $leasingRadios.on('change', function() {
        initLeaseValues();
        calculateTotal();
    });
    $inputRange.on('input', calculateTotal);
    $inputRange1.on('input', calculateTotal);

    // 页面初始化时执行一次
    initLeaseValues();
    calculateTotal();
});
</script>
</body>

1. 初始化leaseVal和leaseLength：新增initLeaseValues函数，在页面加载时自动获取默认选中的单选框对应的值，确保计算时变量有有效值。
2. 清理冗余代码：移除重复的事件绑定（比如多次给radio加change事件），合并重复逻辑。
3. DOM元素缓存：把常用的DOM元素提前缓存，减少重复查询DOM的性能开销。
4. 修复变量拼写错误：leaseLenght改为leaseLength，避免潜在的bug。
5. 添加安全校验：在calculateTotal里先判断leaseVal是否存在，防止意外的NaN。

1. 统一代码风格：尽量保持jQuery和原生JS的风格一致，比如要么都用jQuery的选择器和事件绑定，要么都用原生API，避免混合导致的混乱。
2. 封装复用逻辑：把初始化、计算这类可复用的逻辑封装成函数，提高代码可读性和可维护性。
3. 避免重复DOM查询：DOM查询是比较耗时的操作，把常用的元素缓存到变量中，不要每次需要都重新查询。
4. 事件委托（可选）：如果后续会动态添加单选框或滑块，可以用事件委托的方式绑定事件，比如$('#calculator').on('change', 'input[type=radio]', function() { ... })，这样动态添加的元素也能触发事件。
5. 数值处理要严谨：处理数值时尽量明确指定进制（比如parseInt(value, 10)），避免默认的八进制解析问题；计算后可以添加合法性校验，确保结果是有效的数字。

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