不知道如何显示输出答案

【问题标题】：Can't figure out how to display output不知道如何显示输出
【发布时间】：2017-11-08 00:48:58
【问题描述】：

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

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

}

【问题讨论】：

标签： javascript html loops if-statement

【解决方案1】：

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

获取号码：var num = document.getElementById('txtBox').value;

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

您的代码的基本功能示例，此处：https://jsfiddle.net/4czkfrnd/

【讨论】：

感谢您的帮助！
太棒了！欢迎来到 stalkoverflow！如果您认为此处发布的针对您的问题的答案之一是已接受的答案，请将其标记为：stackoverflow.com/help/someone-answers 我们在此处发布的树答案（到目前为止）是好的答案，标记已接受的答案有助于我们提高声誉，并且也将帮助其他偶然发现您的相同问题的人。

【解决方案2】：

有很多方法可以在浏览器的屏幕上显示内容。您可以使用低级别并针对 DOM API 本身工作，或者您可以使用几个更高级别的框架中的任何一个来使这项工作更容易，或者更复杂。

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

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

【讨论】：

【解决方案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>

【讨论】：