为何两个输入框数值相乘功能失效？控制台输出始终为0

你的代码存在三个核心问题：

• 页面初始化时就获取输入框值，此时输入框为空，空字符串转数字结果为0，导致result初始值固定为0，且点击按钮时不会重新计算最新值
• 未将输入框的字符串值转为数字类型，直接相乘会引发类型错误
• 给<div>调用val()方法无效，val()仅适用于表单控件类元素

修正后的代码 #

<body>
<label for="hoogte">hoogte:</label>
<input type="text" id="hoogte">
<label for="breedte">breedte:</label>
<input type="text" id="breedte">
<button id="btnKnop1">Klik Hier</button>
<div id="divResult"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(() => {
        $('#btnKnop1').on('click', function () {
            // 点击时才获取最新输入值，并转为数字
            let hoogte = parseFloat($('#hoogte').val()) || 0;
            let breedte = parseFloat($('#breedte').val()) || 0;
            let result = hoogte * breedte;
            // 用html()更新div内容
            $('#divResult').html(result);
        })
    })
</script>
</body>

关键修改说明 #

• 将获取输入值、计算逻辑移入点击事件内部，确保每次点击都使用用户最新输入的数值
• 用parseFloat()将输入的字符串转为数字，添加|| 0处理非数字输入的情况（避免输出NaN）
• 移除无效的val()调用，仅用html()更新div的内容

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