HTML三个输入框求和验证为100问题求助（代码无响应）

问题根源 #

1. jQuery未正确加载：页面头部的script标签写法错误，src属性被放在了标签内部文本区域，而非标签的属性位置，浏览器无法识别并加载jQuery库，导致所有依赖jQuery的代码无法执行，这是点击按钮无任何反应的核心原因。
2. 按钮类型潜在问题：当前按钮使用type="submit"，虽然页面没有form元素不会触发页面刷新，但后续若添加form标签，可能会导致意外的页面提交行为，建议改为type="button"。

修正后的完整代码 #

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
</head>
<body>
    <input type="text" class="input" id="value1">
    <input type="text" class="input" id="value2">
    <input type="text" class="input" id="value3">
    <button type="button" name="submit" id="submit">check sum</button>
    <p id="resultMessage"></p>

    <script>
    $(document).ready(function() {
        // 按钮点击事件
        $('#submit').on('click', function() {
            var val1 = $("#value1").val();
            var val2 = $("#value2").val();
            var val3 = $("#value3").val();

            // 数值验证
            if (!isNumeric(val1) || !isNumeric(val2) || !isNumeric(val3)) {
                $('#resultMessage').text('部分输入不是有效数字');
                return;
            }

            // +运算符将字符串转为数字类型
            var sum = +val1 + +val2 + +val3;

            if (sum > 100) {
                $('#resultMessage').text('总和大于100 (' + sum + ')');
            } else if (sum < 100) {
                $('#resultMessage').text('总和小于100 (' + sum + ')');
            } else {
                $('#resultMessage').text('总和等于100');
            }
        });

        // 数值验证函数
        function isNumeric(n) {
            return !isNaN(parseFloat(n)) && isFinite(n);
        }
    }); 
    </script>
</body>
</html>

额外优化建议 #

• 给输入框添加type="number"属性，限制用户只能输入数字，减少前端验证压力。
• 可以在用户输入过程中实时计算总和并提示，提升交互体验。

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