2017-06-06 48 views
1

這聽起來像你的程序員一個簡單的事情,在那裏,但我似乎無法推測出來。我正在製作一個將十進制數字轉換爲羅馬數字的程序。我有核心代碼工作,但我似乎無法想象如何我可以在屏幕上顯示結果。我希望這樣,當用戶在一個文本框中鍵入一個數字時,按下一個按鈕,結果就會顯示在另一個文本框中。感謝您的時間&幫助。無法弄清楚如何顯示輸出

<html> 
<head> 
    <meta charset="UTF-8"> 
    <script src="Main.js" type="text/javascript"></script> 
    <link href="Main.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
     <form id="Awesome"> 
     <label>Input Text Here: </label><input type="text" id="txtBox"> 
     <br><br> 
     <label>Dec to Roman #: </label><input type="text" id="Results"> 
     <br><br> 
     <input type="button" value="Calculate" id="Execute"> 

     </div> 
     </form> 
</body> 
</html> 

的Javascript

function convertToRoman(num) { 
var romans = { 
M: 1000, 
CM: 900, 
D: 500, 
CD: 400, 
C: 100, 
XC: 90, 
L: 50, 
XL: 40, 
X: 10, 
IX: 9, 
V: 5, 
IV: 4, 
I: 1, 
}; 

var result = ''; 

for (var key in romans) { 
if (num >= romans[key]) { 
    result += key.repeat(Math.trunc(num/romans[key])); 
    num -= romans[key] * Math.trunc(num/romans[key]); 
} 
} 

return result; 

} 

回答

0

使用document.getElementById()方法,通過所輸入的ID那裏。 然後爲結果,您可以將它設置爲.value到您的結果。

搶民:var num = document.getElementById('txtBox').value;

顯示結果:document.getElementById('Results').value = result;

這與您的代碼,這裏的一個基本功能例如:https://jsfiddle.net/4czkfrnd/

+0

謝謝你們的幫助! –

+0

太棒了!歡迎來到stalkoverflow!如果您考慮在這裏張貼到你的問題的答案之一,是公認的答案,請把它標記爲這樣:https://stackoverflow.com/help/someone-answers我們在這裏(到目前爲止)發佈的樹的答案是好的,標誌着一個被接受的答案可以幫助我們贏得聲譽,同時也會幫助那些偶然發現同樣問題的人。 – Juan

0

有很多方法可以顯示在事瀏覽器的屏幕。您可以低級別工作,並對DOM API本身進行工作,或者您可以使用幾個更高級別的框架中的任何一個來使這項工作更容易,或者可能更復雜。

如果您想了解整個瀏覽器的運行時環境的應用程序,你可能檢出DOM。如果你想使一些更復雜的東西,嘗試jQUery。 jQuery允許你在頁面上以稍高的級別與視覺元素進行交互。

複雜的一個新的水平,這是毫無意義的,如果你沒有建立一個完善的應用程序,如計算器本身,是一個完整的應用程序框架,如AngularJS或VUE。如果您正在做簡單的事情,或者您想要將瀏覽器作爲應用程序平臺進行學習,則不需要這種方法。高層框架會掩蓋真正發生的事情,而且你不會學到太多東西。

0

可以使用jQuery函數.val()設置一些輸入值和監聽的事件input您的輸入:

$(function(){ 
 
    $('#txtBox').on('input',function(){ 
 
    $('#Results').val(convertToRoman($(this).val())); 
 
    }); 
 
}); 
 

 
function convertToRoman(num) { 
 
var romans = { 
 
M: 1000, 
 
CM: 900, 
 
D: 500, 
 
CD: 400, 
 
C: 100, 
 
XC: 90, 
 
L: 50, 
 
XL: 40, 
 
X: 10, 
 
IX: 9, 
 
V: 5, 
 
IV: 4, 
 
I: 1, 
 
}; 
 

 
var result = ''; 
 

 
for (var key in romans) { 
 
if (num >= romans[key]) { 
 
    result += key.repeat(Math.trunc(num/romans[key])); 
 
    num -= romans[key] * Math.trunc(num/romans[key]); 
 
} 
 
} 
 

 
return result; 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="Main.js" type="text/javascript"></script> 
 
    <link href="Main.css" rel="stylesheet" type="text/css"/> 
 
</head> 
 
<body> 
 
     <form id="Awesome"> 
 
     <label>Input Text Here: </label><input type="text" id="txtBox"> 
 
     <br><br> 
 
     <label>Dec to Roman #: </label><input type="text" id="Results"> 
 
     <br><br> 
 
     <input type="button" value="Calculate" id="Execute"> 
 

 
     </div> 
 
     </form> 
 
</body> 
 
</html>