无法弄清楚如何显示输出

Question

对于您那里的程序员来说，这听起来似乎很简单，但我似乎无法弄清楚。 我正在制作一个将十进制数转换为罗马数字的程序。 我已经使核心代码正常工作，但是我似乎无法考虑如何在屏幕上显示结果。 我希望这样，当用户在文本框中输入数字时，按一下按钮，结果就会显示在另一个文本框中。 感谢您的时间和帮助。

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

Java脚本

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;

}

Answer 1

使用document.getElementById()方法，在此传递输入ID。 然后，对于结果，可以将.value设置为结果。

要获取数字： var num = document.getElementById('txtBox').value;

要显示结果： document.getElementById('Results').value = result;

您的代码的基本功能示例，请参见： https ： //jsfiddle.net/4czkfrnd/

Answer 2

有很多方法可以在浏览器的屏幕上显示内容。 您可以低级使用DOM API本身，也可以使用几种高级框架中的任何一种来简化此工作，或者使之更加复杂。

如果您想了解整个浏览器作为应用程序的运行时环境，则可以签出DOM。 如果您想做一些更复杂的事情，请尝试jQUery。 jQuery允许您与页面上的可视元素进行更高级别的交互。

如果您不构建复杂的应用程序（例如stackoverflow本身），那么下一个复杂程度将毫无意义，它将是一个完整的应用程序框架，例如AngularJS或Vue。 如果您正在做简单的事情，或者想要将浏览器作为应用程序平台学习，则不需要这种方法。 高级框架将掩盖实际发生的事情，您将学不到很多东西。

Answer 3

您可以使用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>

无法弄清楚如何显示输出

问题描述

3 个解决方案

解决方案1
0 2017-06-06 20:56:06

解决方案2
0 2017-06-06 20:56:30

解决方案3
0 2017-06-06 20:59:22

无法弄清楚如何显示输出

问题描述

3 个解决方案

解决方案1 0 2017-06-06 20:56:06

解决方案2 0 2017-06-06 20:56:30

解决方案3 0 2017-06-06 20:59:22

解决方案1
0 2017-06-06 20:56:06

解决方案2
0 2017-06-06 20:56:30

解决方案3
0 2017-06-06 20:59:22