Question

我正在尝试从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>

Answer 1

你做错了几件事。

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

其次，您没有将结果写入输出字段。此行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>

Answer 2

你能使用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;

Answer 3

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

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

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

3 个答案: