2017-06-06 7 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を設定することができます。ここでは、document.getElementById('Results').value = result;

あなたのコードで、この基本的な機能例:結果を表示するにはvar num = document.getElementById('txtBox').value;

:NUMをつかむために

https://jsfiddle.net/4czkfrnd/

+0

ありがとうあなたの助け! –

+0

恐ろしい!ストーカーオーバーフローへようこそ!あなたの質問にここに投稿された回答の1つが受け入れられた回答であると考えるなら、それを次のようにマークしてください:https://stackoverflow.com/help/someone-answersここで投稿したツリーの回答は良いものですが、受け入れられた回答をマークすることで、評判が向上し、同じ問題を抱えている他の人々にも役立ちます。 – Juan

0

に何かを表示するために多くの方法があります。ブラウザの画面。低レベルになり、DOM API自体に対して作業を行うことができます。また、いくつかの上位レベルのフレームワークのいずれかを使用して、この作業を容易にしたり、もっと複雑にすることができます。

アプリケーションの実行時環境としてブラウザ全体について知りたい場合は、DOMをチェックアウトすることができます。もう少し洗練されたものを作りたいなら、jqueryを試してみてください。 jQueryを使用すると、ページ上のビジュアル要素と少し上のレベルで対話できます。

洗練された次のレベルは、stackoverflow自体のような洗練されたアプリケーションを構築していない場合、AngularJSやVueのような完全なアプリケーションフレームワークになります。あなたは何か簡単なことをしている場合や、アプリケーションプラットフォームとしてブラウザを学びたい場合でも、この方法は必要ありません。高レベルのフレームワークは、実際に何が起こっているのかを隠してしまいます。

0

あなたは、いくつかの入力値を設定し、入力上のイベントinputをリッスンするためにjQueryの機能.val()を使用することができます。

$(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>

関連する問題