如何使用 onkeydown 函数将摄氏度值更新为华氏度转换器

How to use the onkeydown function to update celsius value in degree to farenheit converter

我决定构建一个网络实用程序,帮助人们轻松地将度数转换为华氏度。页面上的每个 html 元素都按预期呈现,唯一的问题是 javascript...

方法论

我使用 javascript onkeydown() 来注册将响应度数输入字段上的键盘按下的方法。此函数调用另一个名为 update() 的函数,该函数应该获取用户在度数字段中输入的输入,对其进行处理并将结果显示在华氏度字段中。除了更新功能似乎有问题。我不知道访问输入字段属性和分配的方式是否...请帮助

代码

<!DOCTYPE html>
<html>
<head>
<title>Degrees to Farenheit Converter
</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>Convert Degrees to Farenheit</h5></center>
<center><h5>Temp in Degrees:</h5><input class="form-control"type="number" id="degrees" onkeydown="update()"/><br/></center>
<center><h5>Temp in Celsius</h5><input class="form-control"type="number"  id="farenheit"/></center>
</div>
</body>
<script type="text/javascript">
let degree=document.getElementbyId("degrees");
let far=document.getElementById("farenheit");
//iplement a function that will listen on text
//change inside the farenheit field
function update(){
//alert("a key was pressed");
//get the number and convert to farenheit
let temp=parseInt(degree.value);
//convert to farenheit and display in th other 
//boex  
let faren=1.8*temp+32;
//display the result in the celsius field
far.value=faren;
}
</script>
</html>

Javascript是区分大小写的,你写document.getElementbyId()当右边的是document.getElementById()

let degree = document.getElementById("degrees");
let far= document.getElementById("farenheit");
//iplement a function that will listen on text
//change inside the farenheit field
function update(){
//alert("a key was pressed");
//get the number and convert to farenheit
let temp=parseInt(degree.value);
//convert to farenheit and display in th other 
//boex  
let faren=1.8*temp+32;
//display the result in the celsius field
far.value=faren;
}
<div class="container">
<center><h5>Convert Degrees to Farenheit</h5></center>
<center><h5>Temp in Degrees:</h5><input class="form-control"type="number" id="degrees" onkeyup="update()"/><br/></center>
<center><h5>Temp in Celsius</h5><input class="form-control"type="number"  id="farenheit"/></center>
</div>