JS根据用户输入24小时制时间显示问候语功能异常如何修复

现有代码错误点梳理 #

• 比较运算符误用：判断逻辑中把范围比较的>=错写为赋值运算符=。第一个判断hourNow = 6 && hourNow<=9的实际执行逻辑是：先计算6 && hourNow<=9的布尔值，再把这个值赋值给hourNow，只有输入值<=9时该表达式返回true，这也是仅输入9能触发早餐分支的原因。
• 判断逻辑错误：晚餐时段的判断写为hourNow = 17 && hourNow >=20，本身逻辑矛盾，17不可能大于等于20，该分支永远不会触发。
• 输入类型隐患：prompt返回值为字符串类型，直接和数字比较存在隐式转换风险。
• 作用域问题：greeting声明在代码块内部，document.write在块外执行，可能出现变量未定义的报错。
• 拼写错误：早餐问候中的Brreakfast拼写有误。

修复后完整代码 #

<!DOCTYPE html>
<html>
<body>
<script>
let hourNow = Number(prompt("please enter the hour based on 24hr clock"));
let greeting;

// 先校验输入合法性
if (isNaN(hourNow) || hourNow < 0 || hourNow > 23) {
    greeting = '请输入0-23之间的有效小时数';
} else if(hourNow >= 6 && hourNow <=9){
    greeting = 'Breakfast is served.';
} else if (hourNow >= 11 && hourNow <=13){
    greeting = 'Time for lunch.';
} else if (hourNow >= 17 && hourNow <=20){
    greeting = 'Time for dinner';
}else{
    greeting = 'You will have to wait or get a snack'
}
document.write('<h3>' + greeting + '</h3>');
</script>
</body>
</html>

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