无法弄清楚如何显示输出

问题描述：

这听起来像你的程序员一个简单的事情，在那里，但我似乎无法推测出来。我正在制作一个将十进制数字转换为罗马数字的程序。我有核心代码工作，但我似乎无法想象如何我可以在屏幕上显示结果。我希望这样，当用户在一个文本框中键入一个数字时，按下一个按钮，结果就会显示在另一个文本框中。感谢您的时间&帮助。无法弄清楚如何显示输出

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

}

答

使用document.getElementById()方法，通过所输入的ID那里。然后为结果，您可以将它设置为.value到您的结果。

抢民：var num = document.getElementById('txtBox').value;

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

这与您的代码，这里的一个基本功能例如：https://jsfiddle.net/4czkfrnd/

谢谢你们的帮助！ –

太棒了！欢迎来到stalkoverflow！如果您考虑在这里张贴到你的问题的答案之一，是公认的答案，请把它标记为这样：https://stackoverflow.com/help/someone-answers我们在这里（到目前为止）发布的树的答案是好的，标志着一个被接受的答案可以帮助我们赢得声誉，同时也会帮助那些偶然发现同样问题的人。 – Juan

答

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

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

复杂的一个新的水平，这是毫无意义的，如果你没有建立一个完善的应用程序，如计算器本身，是一个完整的应用程序框架，如AngularJS或VUE。如果您正在做简单的事情，或者您想要将浏览器作为应用程序平台进行学习，则不需要这种方法。高层框架会掩盖真正发生的事情，而且你不会学到太多东西。

答

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

无法弄清楚如何显示输出

相关推荐