我在转换英寸到厘米的转换表格时遇到问题
问题描述:
我最近启动了Java脚本并完成了HTML和CSS。我的问题是,由于某种原因,我的表格是为了将厘米转换为英寸而不是以第二种形式显示输出....虽然我的第一种形式是将摄氏转换为华氏温度。第二个奇怪的是,第一种形式只有在第二种形式的所有相关代码被删除时才起作用。我是新来的JavaScript和将不胜感激任何帮助我在转换英寸到厘米的转换表格时遇到问题
这是我的HTML和Java脚本。在第63行
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="First Website.css" />
<title>
</title>
</head>
<body>
<h1 class="title">Conversion Table
<h1>
<!--The div styling the box for the conversion table -->
<div class="convert">
<!--The title to the conversion of fahrenheit to celsius -->
<h1>Convert Fahrenheit to celsius </h1>
<!--The input form for Celsius -->
<p>
<input id="c" onkeyup="convert('C')">:Celsius</p>
<!--The input form for Fahrenheit -->
<p>
<input id="f" onkeyup="convert('F')">:Fahrenheit</p>
</div>
<div class="convert1">
<h1>Convert Centimetres to inches</h1>
<p>
<input id="m" onkeyup="convert1('M')">:Centimetres</p>
<p>
<input id="i" onkeyup="convert1('I')">:inches</p>
</div>
</body>
<script>
// the function to convert fahrenheit to celsius and vice versa
function convert(degree) {
var x;
if (degree == "C") {
x = document.getElementById("c").value * 9/5 + 32;
document.getElementById("f").value = Math.round(x);
} else {
x = (document.getElementById("f").value - 32) * 5/9;
document.getElementById("c").value = Math.round(x);
}
}
//the function to convert centimetres to inches
function convert1(distance) {
var y;
if (distance == "M") {
y = document.getElementById("m").value/0.393701;
document.getElementById("i").value = Math.round(y);
}
else {
y = (document.getElementById("m").value * 1.393701;
document.getElementById("i").value = Math.round(y)
}
}
</script>
<style>
.convert {
border: 2px solid black;
width: 450px;
top: 100px;
position: static;
background-color: #CD6A44;
float: left;
color: black;
font-size: 20px;
display: inline-block;
}
.title {
position: fixed;
/* or absolute */
left: 45%;
font-size: 40px;
}
body {
background-color: #262626
}
h1 {
font-ize: 25px;
}
.convert1 {
border: 2px solid black;
width: 450px;
top: 100px;
position: static;
background-color: #CD6A44;
float: right;
color: black;
font-size: 20px;
display: inline-block;
}
</style>
</html>
答
小的语法问题,那就是:
y = (document.getElementById("m").value * 1.393701;
应该是:
y = document.getElementById("i").value * 1.393701; //i for inch
document.getElementById("m").value = Math.round(y) //Set meters
这是经常被任何IDE突出,你可能不使用一个,我会推荐你安装VS Code并安装JSHint(Tips and Use)和JSLint(Warnings and Recommendations)
好运气学习JS年轻的学徒
答
在功能convert1你的线条
y = (document.getElementById("m").value * 1.393701;
document.getElementById("i").value = Math.round(y)
应该
y = (document.getElementById("i").value * 2.54;
document.getElementById("m").value = Math.round(y)
那就是你有“我”,并在错误的地方“M”,和1.393 ...号码是错误的。 1英寸是2.54厘米而不是1.393厘米。
而且在你的CSS,你在字体大小有一个错字在
h1{
font-ize:25px;
}
没有 “S”!这有帮助吗?
就我个人而言,我会离开css,直到你有JS工作。