点击div触发prompt设置球尺寸时条件判断不生效，该如何修复？

错误点汇总 #

• CSS语法错误：通用div样式块未闭合，缺少结尾的}，导致后续.ball4的背景色样式无法生效
• 类型错误：prompt()接口返回值为字符串格式，未转换为数字直接做大小判断，会出现非预期的逻辑结果
• 变量引用错误：JS逻辑的else分支中引用了从未定义的变量size，运行时会直接抛出引用异常
• 功能逻辑缺失：拿到合法的尺寸参数后，没有主动修改球元素的宽高样式，自然不会触发尺寸更新
• 边界场景未兼容：没有处理用户输入非数字、点击prompt取消按钮的异常情况，容易出现报错

修复后完整可运行代码 #

CSS代码 #

<style>
    body {
        background-color: black;
        text-align: center;
    }
    h1 {
        color: white;
    }
    div {
        width: 100px;
        height: 100px;
        margin: auto;
        margin-bottom: 10px;
        border-radius: 50%;
        transition: 0.3s;
        line-height: 50px;
    }
    .ball4 {
        background-color: brown;
        color: white;
    }
</style>

HTML代码 #

<div class="ball4" onclick="onBall4Click()">
    PROMPT
</div>

JavaScript代码 #

<script>
    function onBall4Click() {
        const ball4 = document.querySelector('.ball4');
        let ball4Size = prompt("Size of ball? ");
        // 处理用户点击取消的场景
        if (ball4Size === null) return;
        // 把输入的字符串转为数字
        ball4Size = Number(ball4Size);
        // 校验输入是否为有效正整数
        if (isNaN(ball4Size) || ball4Size <= 0) {
            alert("请输入有效的正整数尺寸");
            return;
        }
        if (ball4Size > 1000) {
            alert("Too big!");
        } else {
            // 赋值宽高和行高，实现尺寸修改+文字保持居中
            ball4.style.width = `${ball4Size}px`;
            ball4.style.height = `${ball4Size}px`;
            ball4.style.lineHeight = `${ball4Size}px`;
        }
    }
</script>

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