时间戳

首页 > 解决方案 > 如何使用 onkeydown 函数将摄氏度值更新为华氏温度转换器

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

问题描述

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

方法

我使用 javascriptonkeydown()来注册将响应在度数输入字段上的键盘按下的方法。该函数调用另一个函数，该函数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>

标签： javascriptinput

解决方案

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>

推荐阅读