2015-10-06 96 views
1

我對HTML和Javascript真的很陌生,所以請原諒我的任何明顯的錯誤。Javascript和HTML,Javascript函數沒有輸出

我想獲得一個Javascript函數來工作並返回一個HTML值。

該函數接受一個數字的輸入並返回一個羅馬數字。

發生的唯一情況是顯示一個黑色的'>'字符,同時也忽略了我的<style>聲明是#839496。

我的代碼:

<!doctype html> 
    <html> 
    <head> 
    <title>Numbers</title> 
    <style> 
    body {background-color:#002b36} 
     h1 {color:#fdf6e3} 
     h2 {color:#fdf6e3} {font-size: size 9} 
     h3 {color:#fdf6e3} {font-size: size 19} 
     p {color:#839496} 
    </style> 
    </head> 
    <body> 
    <h1>Numbers</h1> 
    <h2>An app to display detailed info about a number</h2> 
    <hr> 
    <br /> 

    <form id="form"> 
    <input id="num" type="number" min="1" name="num"> 
    <button onclick="document.getElementById("rom").innerHTML = result;">Get results</button> 
    </form> 

    <h3>Results</h3> 
    <hr> 
    <p id="rom"></p> 

    <script javascript type="text/javascript"> 
    document.getElementById("num").value = num; 
    num = parseInt(document.getElementById("num").value); 

    var result = '', 
     ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'], 
     xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1]; 

    if (num <= 3999999 && num >= 4000) { 
     num += ''; // need to convert to string for .substring() 
     result = '<label style="text-decoration: overline;">'+convert(num.substring(0,num.length-3))+'</label>'; 
     num = num.substring(num.length-3); 
    } 

    for (x = 0; x < ref.length; x++){ 
     while(num >= xis[x]){ 
      result += ref[x]; 
      num -= xis[x]; 
     } 
    } 

document.getElementById("rom").innerHTML = (result); 

</script javascript type="text/javascript"> 


</script> 

    </body> 
</html> 
+0

是什麼'' –

+0

還什麼'H2 {顏色: #fdf6e3} {font-size:size 9}' –

+0

將** onclick **事件中的單引號替換爲雙引號convert this ** ** to ** ** – Mayank

回答

-1

加載頁面時,您只能讀取文本框num的價值。因此,當用戶進行更改時,您永遠不會獲得價值。你需要改變你的代碼,使它存在於一個函數中。當你點擊按鈕時,它會調用運行帶有更新值的代碼的函數。

第二個問題是你在雙引號內引用了雙引號。所以內部關閉了外面。你需要在它們中使用單引號。更好的是不加引人注目地添加事件。

javascript在腳本標記沒有意義,擺脫它。 <script type="text/javascript"> 另外</script javascript type="text/javascript">是錯誤的。擺脫類型,結束標記不應該有屬性。你還有一個額外的</script>標籤。

在定義之前,您使用num

樣式不會將所有內容分隔到自己的組中。並且沒有設置字體的「大小」。它應該像

h2 { 
    color:#fdf6e3; 
    font-size:9px; 
}  

<!doctype html> 
<html> 
    <head> 
    <title>Numbers</title> 
    <style> 
     body {background-color: #002b36; } 
     h1 { color:#fdf6e3; } 
     h2 { color:#fdf6e3; font-size: 9px; } 
     h3 { color:#fdf6e3; font-size: 9px; } 
     p { color:#839496; } 
    </style> 
    </head> 
    <body> 
    <h1>Numbers</h1> 
    <h2>An app to display detailed info about a number</h2> 
    <hr> 
    <br /> 

    <form id="form"> 
     <input id="num" type="number" min="1" name="num"> 
     <button onclick="calculate(); return false;">Get results</button> 
    </form> 

    <h3>Results</h3> 
    <hr> 
    <p id="rom"></p> 
    <script type="text/javascript"> 
     function calculate() { 
     num = parseInt(document.getElementById("num").value); 

     var result = '', 
      ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'], 
      xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1]; 

     if (num <= 3999999 && num >= 4000) { 
      num += ''; // need to convert to string for .substring() 
      result = '<label style="text-decoration: overline;">'+convert(num.substring(0,num.length-3))+'</label>'; 
      num = num.substring(num.length-3); 
     } 

     for (x = 0; x < ref.length; x++){ 
      while(num >= xis[x]){ 
      result += ref[x]; 
      num -= xis[x]; 
      } 
     } 

     document.getElementById("rom").innerHTML = result; 
     } 
    </script> 

    </body> 
</html> 
+0

謝謝!也幫助我避免將來出現這樣的錯誤。 –

+0

如何在其他功能中重複使用輸入? –

+0

參考輸入?我不確定你在問什麼。 – epascarello

-2

試試這個

<!doctype html> 
     <html> 
     <head> 
     <title>Numbers</title> 
     <style> 
     body {background-color:#002b36} 
      h1 {color:#fdf6e3} 
      h2 {color:#fdf6e3;font-size:9px} 
      h3 {color:#fdf6e3;font-size:19px} 
      p {color:#839496} 
     </style> 
     </head> 
     <body> 
     <h1>Numbers</h1> 
     <h2>An app to display detailed info about a number</h2> 
     <hr> 
     <br /> 

     <form id="form"> 
     <input id="num" type="number" min="1" name="num"> 
     <button onclick="document.getElementById("rom").innerHTML = result;">Get results</button> 
     </form> 

     <h3>Results</h3> 
     <hr> 
     <p id="rom"></p> 

     <script> 
     document.getElementById("num").value = num; 
     num = parseInt(document.getElementById("num").value); 

     var result = '', 
      ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'], 
      xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1]; 

     if (num <= 3999999 && num >= 4000) { 
      num += ''; // need to convert to string for .substring() 
      result = '<label style="text-decoration: overline;">'+convert(num.substring(0,num.length-3))+'</label>'; 
      num = num.substring(num.length-3); 
     } 

     for (x = 0; x < ref.length; x++){ 
      while(num >= xis[x]){ 
       result += ref[x]; 
       num -= xis[x]; 
      } 
     } 

     document.getElementById("rom").innerHTML = (result); 

     </script> 


    </body> 
</html>