从表单中获取用户输入执行计算(操作顺序）并输出回该表单

take user input from a Form perform calculation (order of operations) and output back into that form

本文关键字：表单 顺序 操作 输出 计算 获取 用户 输入 执行      更新时间：2023-09-26

我试图从Form（INPUT1）的一个元素中获取输入，并执行一个基本上OUTPUT1=（（INPUT1/20）.58）.30的计算我已经看到了很多将CM转换为英寸等的例子。但没有操作顺序。请帮忙！墙和我的头相遇太多次了。这就是我目前所拥有的，（不起作用）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1"/></td>
<td><input type="number" name="OUTPUT1"></td>
<table>
</form>
<script type="text/javascript">
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
var CALC3 = OUTPUT1;
</script>
</body>
</html>

您做错了几件事。

首先，必须在特定时间读取输入值。例如，当按下按钮时，当输入字段的值发生变化或类似情况时。在您的情况下，当输入字段没有任何值时，文档一经解析就被读取。

其次，您没有将结果写入输出字段。这一行var CALC3 = OUTPUT1;重新声明CALC3变量，并为其提供值OUTPUT1。您想要的是将字段OUTPUT1的值设置为CALC3

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<form name="TESTING">
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="2"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>OUTPUT</h3></th>    </tr>
<tr></tr>
<td><input type="number" name="INPUT1" id="input" onchange="calculate();"/></td>
<td><input type="number" name="OUTPUT1" id="output"></td>
<table>
</form>
<script type="text/javascript">
function calculate() {
var USERINPUT1 = document.TESTING.INPUT1.value;
var CALC1 = USERINPUT1/20;
var CALC2 = CALC1*.585;
var CALC3 = CALC2*.30;
document.TESTING.OUTPUT1.value = CALC3;
}
</script>
</body>
</html>

当第一个输入字段的值发生变化时，它会调用函数calculate（）（onchange="calculate();"），然后自动更新第二个字段（您可以像读取document.TESTING.OUTPUT1.value = CALC3;一样写入值）。

[编辑]代码的第一个版本与您的非常相似，因此您将能够更容易地理解它，但您也应该看看这一点。你有一些放错地方的表行标签和一些不整洁的代码，所以我也清理了一下。这离最佳实践还很远，但它是页面的改进版本

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form name="TESTING">
        <table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
            <tr>
                <th colspan="2">
                    <h1>TESTING</h1>
                </th>
            </tr>
            <tr>  
                <th>
                    <h3>INPUT</h3>
                </th>
                <th>
                    <h3>OUTPUT</h3>
                </th>    
            </tr>
            <tr> 
                <td>
                    <input type="number" name="INPUT1" id="input" onchange="calculate();"/>
                </td>
                <td>
                    <input type="number" name="OUTPUT1" id="output">
                </td>
            </tr>
        </table>
    </form>
<script type="text/javascript">
    function calculate() {
        var USERINPUT1 = document.TESTING.INPUT1.value,
            RESULT = (USERINPUT1/20) * .585 * .30;
        document.TESTING.OUTPUT1.value = RESULT;
    }
</script>
</body>
</html>

你能使用jQuery吗？

如果是，则使用您提供的内容：http://jsfiddle.net/vuYMs/

否则，我可以修改它，使其在没有jQuery的情况下工作。

编辑：

这里有一个更面向javascript的解决方案：http://jsfiddle.net/vuYMs/3/

var input1 = document.getElementsByName("INPUT1")[0];
var output1 = document.getElementsByName("OUTPUT1")[0];
function changeInput(e){ 
    var calc = (((input1.value/20)*0.585)*0.30);
    output1.value = calc;
}
input1.onchange = changeInput;

下面的代码将构建必要的自动计算器。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(ele)
{
    var result = ((ele / 20) * 0.585) * 0.30;
    document.getElementById("output1").value = result;
}
</script>
<style type="text/css">
body                    { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0; padding:0; }
.container              { background:#0CC; border:1px dotted #bbb; margin:40px auto 0 auto;  padding: 20px; width:500px; }
h1                      { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:bold; text-align:center; text-decoration:underline;  }
input                   { border:1px solid #eee; }
.container p label      { width:100px; float:left; }
p                       { clear:both; }
</style>
</head>
<body>
<form name="testing" method="post" action="">
<div class="container">
    <h1> My Calculator</h1>
    <p><label>Input : </label><input type="number" name="input1" value="" onBlur="calculate(this.value);"/></p>
    <p><label>Output : </label><input type="number" name="output1" id="output1"></p>
</div>
</form>

</body>
</html>
相关文章：