我最近啓動了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>