I decided to build a web utility that will help people do easy conversions from degrees to farenheit. Every html element on te page is rendering as expected, the only problem is the javascript...
Methodology
I used the javascript onkeydown() to register the method that will be responding to keyboard presses on the degrees input field. This function calls another function called update() that is supposed to get the input the user entered in the degrees field, process it and display the result in the farenheit field. Except that there seems to be a problem in the update function. I do not know if its the way am accessing the input fields properties and assigning...please help
Code
<!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 is case-sensitive, and you write document.getElementbyId() when the right one is 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>