无法弄清楚如何显示输出

时间:2017-06-06 20:46:39

标签: javascript html loops if-statement

对于那些程序员来说,这可能听起来很简单,但我似乎无法弄明白。我正在制作一个将十进制数转换为罗马数字的程序。我已经有了核心代码,但我似乎无法想象如何在屏幕上显示结果。我希望这样当用户在文本框中键入数字时,只需按一下按钮,结果就会显示在另一个文本框中。谢谢你的时间和帮助

<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 个答案:

答案 0 :(得分:0)

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

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

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

您的代码的基本功能示例,例如:https://jsfiddle.net/4czkfrnd/

答案 1 :(得分:0)

有很多方法可以在浏览器的屏幕上显示内容。您可以进入低级别并且不依赖于DOM API本身,或者您可以使用任何更高级别的框架来使这项工作更容易,或者可能更复杂。

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

如果您没有构建复杂的应用程序(如stackoverflow本身),那么下一级复杂性将是一个完整的应用程序框架,例如AngularJS或Vue,这是毫无意义的。如果您正在做一些简单的事情,或者即使您想要将浏览器学习为应用程序平台,也不需要这种方法。高级框架将模糊实际发生的事情,你不会学到太多东西。

答案 2 :(得分:0)

您可以使用JQuery函数.val()设置一些输入值并在输入上侦听事件input

&#13;
&#13;
$(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;

}
&#13;
<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>
&#13;
&#13;
&#13;