2017-10-20 96 views
0

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

回答

1

小的語法問題,那就是:

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年輕的學徒

0

在功能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工作。

相關問題