In: Computer Science
does this java script code seam incorrect to anyone of you ?
var inch=document.getElementById("i");
var cm=document.getElementById("c");
function convert() {
cm.value=(inch*2.54);
}
here is the html code also
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Length Converter</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<script src="length.js"></script>
<!-- Custom styles for this template -->
<link href="css/the-big-picture.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark
fixed-bottom">
<div class="container">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<h1>Length Converter</h1>
<p><input type="number" id="i" placeholder="Enter Inches"
name="inch"/> In.</p>
<p> <input type="number" id="c" placeholder="Enter
Centimeters" name="cm" disabled > Cm.</p>
<input type="submit" onclick= "convert()"
value="Convert"/>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script
src="vendor/jquery/jquery.min.js"></script>
<script
src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
i cant convert to the right amount of cm if i putt in 99 inches i get 39 centimeters which is incorrect
There are two errors in this code:
1. In the function convert the code should be:
function convert() {
cm.value=(inch.value*2.54);
}
It should be inch.value*2.54 not inch*2.54
2. <script src = "length.js"></script>
It should be declared after declaring input type with ID's "i" and "c", because code will first include length.js file and bind it to the webpage and in that web page until now there will be no input types with ID's "i" and "c". So it will log a null var exception in browser console.
You should declare this script tag before closing </body> tag
Correct Code:
length.js
var inch=document.getElementById("i");
var cm=document.getElementById("c");
function convert() {
cm.value=(inch.value*2.54);
}
HTML Code for webPage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Length Converter</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/the-big-picture.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<div class="container">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<h1>Length Converter</h1>
<p><input type="number" id="i" placeholder="Enter Inches" name="inch"/> In.</p>
<p> <input type="number" id="c" placeholder="Enter Centimeters" name="cm" disabled > Cm.</p>
<input type="submit" onclick= "convert()" value="Convert"/>
<!-- Page Content -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Including length.js file after creating input fields -->
<script src="length.js"></script>
</body>
</html>
Sample Output: