如何使用onkeydown函数实现摄氏度转华氏度数值更新及问题排查

问题修复方案 #

以下是可直接运行的修正版代码，核心修改点已标注：

<!DOCTYPE html>
<html>
<head>
<title>摄氏度转华氏度转换器
</title>
<!--add dependencies-->
<link rel="stylesheet" href="materialize/css/materialize.min.css"/>
<link rel="stylesheet" href="mystyle.css"/>
</head>
<body>
<div class="container">
<center><h5>摄氏度转华氏度</h5></center>
<!-- 修改1：事件从onkeydown改为oninput，输入变化立即触发转换 -->
<center><h5>摄氏度温度：</h5><input class="form-control"type="number" id="degrees" oninput="update()"/><br/></center>
<!-- 文案修正：原标注和实际功能不符，已改为华氏度 -->
<center><h5>华氏度温度：</h5><input class="form-control"type="number"  id="farenheit"/></center>
</div>
</body>
<script type="text/javascript">
// 修改2：getElementbyId拼写修正，b改为大写的B
let degree=document.getElementById("degrees");
let far=document.getElementById("farenheit");
function update(){
let temp=parseInt(degree.value);
// 修改3：增加空值/非法输入判断
if(isNaN(temp)){
    far.value = '';
    return;
}
let faren=1.8*temp+32;
far.value=faren;
}
</script>
</html>

错误说明 #

• 核心语法错误：原代码中getElementbyId是错误写法，DOM API的标准写法为驼峰格式getElementById，大小写错误会导致无法正常获取输入框元素，后续所有操作都会失效。
• 逻辑错误：onkeydown触发时机是按键按下的瞬间，此时输入框还未写入本次输入的内容，会出现转换结果比输入慢一步的问题，替换为oninput即可解决。
• 体验问题：新增非法输入判断，避免输入为空、输入非数字时输出NaN的异常显示。

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