JavaScript小费计算器问题：结果无法正常显示

问题根源 #

你的代码存在几个关键错误，直接导致结果无法正常展示：

1. HTML标签闭合错误：<div id="res">的闭合标签写成了</p>，破坏了DOM结构，导致JavaScript无法正确定位#res元素。
2. 字符串未转数字：输入框的value返回的是字符串类型，直接参与数学计算会引发异常。
3. 边界值处理不全：当人数输入框为空时，osob会是空字符串，此时osob < 1的判断无法触发，需要额外处理空值场景。
4. 结果精度不符合需求：toFixed()默认取整，不符合货币计算保留两位小数的常规要求。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            margin: 0px auto;
            padding: 0;
            font-family: Helvetica, sans-serif;
        }
        body{
            background-color: #006600;
        }
        #main{
            margin-top: 50px;
            width: 300px;
            box-shadow: 5px 5px 7px black;
            border-radius: 10px;
        }
        #header{
            background-color: #001a00;
            color: white;
            text-align: center;
            height: 35px;
            line-height: 35px;
            border-radius: 10px 10px 0 0;
        }
        #form{
            background-color: #f7f7f7;
            display: flex;
            flex-direction: column;
            row-gap: 12px;
            padding: 15px;
            height: 360px;
            border-radius: 0 0 10px 10px;
        }
        #ocena{
            height: 40px;
        }
        input{
            height: 25px;
        }
        #button{
            background-color: #800000;
            color: white;
            width: 160px;
            margin: 10px auto;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
        #res{
            display: flex;
            flex-direction: column;
            visibility: hidden;
        }
        #res p:nth-child(1), #res p:nth-child(3){
            font-weight: bold;
        }
    </style>

    <script>
        function obl(kwotaStr, ocenaStr, osobStr){
            const kwota = parseFloat(kwotaStr) || 0;
            const ocena = parseFloat(ocenaStr) || 0;
            let osob = parseFloat(osobStr) || 1;

            if( kwota <= 0 || ocena <= 0 ) {
                alert("Proszę uzupełnić pola poprawnymi wartościami!");
                return;
            }
            if( osob < 1 ) osob = 1;
            
            const perPersonTip = (kwota * ocena / 100 / osob).toFixed(2);
            document.getElementById('wynik').textContent = `${perPersonTip} zł`;
            document.getElementById('res').style.visibility = 'visible';
        }
    </script>
</head>

<body>
    <div id="main">
        <p id="header">Kalkulator Napiwków</p>
        <div id="form">
            <p>Podaj kwotę rachunku</p>
            <div>
                <input type="number" name="kwota" id="kwota" placeholder="Kwota rachunku" min="0" step="0.01"><span> zł</span>
            </div>
            <p>Jak oceniasz obsługę?</p>
            <select name="ocena" id="ocena">
                <option value="" selected disabled>-- Wybierz z poniższych --</option>
                <option value="30">30% - wyróżniająca</option>
                <option value="20">20% - dobra</option>
                <option value="15">15% - średnia</option>
                <option value="10">10% - zła</option>
                <option value="5">5% - bardzo zła</option>
            </select>
            <p>Ile osób dzieli rachunek?</p>
            <input type="number" name="osob" id="osob" placeholder="Liczba osób płacących" min="1">
            <div id="button" onclick="obl(kwota.value, ocena.value, osob.value)">
                <p>OBLICZ</p>
            </div>
            <div id="res">
                <p>KWOTA NAPIWKU</p>
                <p id="wynik"></p>
                <p>każdy</p>
            </div>
        </div>
    </div>
</body>
</html>

核心修复说明 #

• 修正#res标签的闭合错误，确保DOM结构合法
• 用parseFloat()将输入字符串转为数字，空值/无效值设置默认值
• 增强验证逻辑，确保账单金额和服务评级为有效正数
• 用toFixed(2)保留两位小数，符合货币展示规范
• 新增按钮光标提示、输入框范围限制等细节优化

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