首页 / JAVASCRIPT / javascript-从表单获取用户输入以执行计算(操作顺序),然​​后输出回该表单

javascript-从表单获取用户输入以执行计算(操作顺序),然​​后输出回该表单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-从表单获取用户输入以执行计算(操作顺序),然​​后输出回该表单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2976字，纯文字阅读大概需要5分钟。

内容图文

我正在尝试从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一样写入该值.值= 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>

内容总结

以上是互联网集市为您收集整理的javascript-从表单获取用户输入以执行计算(操作顺序),然​​后输出回该表单全部内容，希望文章能够帮你解决javascript-从表单获取用户输入以执行计算(操作顺序),然​​后输出回该表单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/656471.html

来源：【匿名】