Question

我是HTML和Javascript的新手。我试图尝试使用QT从Javascript调用C ++方法。但是，这个问题与QT无关。我有一个带有两个数字输入的表格。我想添加第三个框，其中将显示结果。我怎么能这样做？这是我的html文件。我不希望所有物品都消失。我希望用户看到多重A，多重写入B，并将结果显示在表单的第三个文本框中。此外，还有一个重置按钮来重置表单。

<html>
<head>
<script>


function Multiply()
{
   var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
   document.write(result);

}

</script>
</head>

<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>

Answer 1

这是一种开始的方式：

演示：http://jsfiddle.net/Q3YV9/

<html>
<head>
<script>


function Multiply()
{
   var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value) 
    document.getElementById("cnr").value = res;

}

</script>
</head>

<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" id="anr" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" id="bnr" name="Multiplicant_B"><br>
Result C: <input type="number" id="cnr" name="Multiplicant_C"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>

如果您不希望预定义结果框，请使用document.createElement('input')将其添加到DOM。

样品：

function Multiply()
{
   var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value) 

    //document.getElementById("cnr").value = res;

    var newinput = document.createElement('input');
    newinput.setAttribute('value', res);
    document.forms["DEMO_FORM"].appendChild(newinput);
}

此演示展示了如何在文档中的任何位置添加输入结果： http://jsfiddle.net/Q3YV9/3/

Answer 2

最简单的方法是使用div标签放入答案框

<html>
<head>
<script>


function Multiply()
{
   var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
   document.getElementById('answerbox').innerHTML=result;

}

</script>
</head>

<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
<div id='answerbox'><div>
</body>
</html>

顺便说一下type =＆＃34; number＆＃34; HTML5中的新功能，以前的版本使用type =＆＃34; text＆＃34;然后对整数的值执行parseInt，对十进制数的值执行parseFloat。

如何在java脚本计算的html文本框中编写结果？

2 个答案: