Can't figure out how to display output
Question
This might sound like a simple thing for you programmers out there but i can't seem to figure it out. I'm making a program that converts Decimal Numbers into Roman Numerals. I've got the core code working but i can't seem to think how i can display the results on the screen. I would like it so that when the user types a number into a text box the result appears in another text box at the press of a button. Thanks for your time & help.
<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;
}
3 answers
solution1
0 2017-06-06 20:56:06
use document.getElementById() method, pass the input id there. Then for the result, you can set it with .value to your result.
To grab the num: var num = document.getElementById('txtBox').value;
To display the result: document.getElementById('Results').value = result;
A basic functional example of this with your code, here: https://jsfiddle.net/4czkfrnd/
solution2
0 2017-06-06 20:56:30
There are many ways to display something on the screen of a browser. You can go low level and work against the DOM API itself, or you can use any of several higher level frameworks to make this work easier, or perhaps just more complicated.
If you are wanting to learn about the whole browser as runtime environment for an application, you might checkout the DOM. If you want to make something with a little more sophistication, try out jQUery. jQuery allows you to interact with the visual elements on the page at a slightly higher level.
The next level of sophistication, which is pointless if you aren't building a sophisticated application, like stackoverflow itself, would be a full application framework, such as AngularJS or Vue. You do NOT need this approach if you are doing something simple, or even if you are wanting to learn the browser as application platform. The high level frameworks will obscure what's really happening, and you won't learn much.
solution3
0 2017-06-06 20:59:22
You can use the JQuery function .val() to set some input value and listen for the event input on your 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.