从内部HTML更改为表单时获得意外结果，输入类型文本字段

Getting unexpected result when changing from innerHTML to form, input type text Field

本文关键字：结果 意外 输入 类型 字段 文本 HTML 内部 表单      更新时间：2023-09-26

当我使用 innerHTML 测试我的代码时，给出了 var num1=57; 得到正确的结果 73.375，现在当输入数字 57 时将代码更改为使用带有输入类型文本框的表单时，它将预期结果更改为 629.625.. 任何帮助将不胜感激

<!DOCTYPE html>


<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <link rel="style" href="css/main.css"  type"text/css"/>
      <title> Get final width </title>
      <script type= "text/javascript">
            function sum()
            {
            var num1;
            num1= document.getvalue.width.value;

            var acc1 = (num1 + 0.625)/(6.25-0.5); 
            var acc2 = Math.ceil((acc1 * 10) / 10) * 6.25 + (4.125 + 0.5);
            document.getElementById('finalwidth').value = (acc2).toFixed(3);
            document.getElementById("finalwidth").readOnly=true;
            }
      </script>       
</head>
<body>
            <div>
            <h3> when input is 57  final width result should be : 73.375</h3>
            <h3> when input is 100  final width result should be : 117.125</h3>
            </div>
            <form name= "getvalue">
                    <label for="width"> Width: </label>
                    <input type="text" name="width" maxlength="5" size="10" value=""/>
                    <input type="button" name="button" Value="calculate" onclick="sum()"/>
                    <label for="finalwidth"> Final width: </label>
                    <input type="text" id="finalwidth" name="finalwidth" maxlength="4" size="10" value=""/>
            </form> 
</body>

试试这个：- http://jsfiddle.net/adiioo7/6q8u5/1/

.JS：- 

function sum() {
    var num1;
    num1 = parseInt(document.getvalue.width.value);

    var acc1 = (num1 + 0.625) / (6.25 - 0.5);
    var acc2 = Math.ceil((acc1 * 10) / 10) * 6.25 + (4.125 + 0.5);
    document.getElementById('finalwidth').value = (acc2).toFixed(3);
    document.getElementById("finalwidth").readOnly = true;
}

当你这样做时：

num1 = document.getvalue.width.value;

num1 的值是一个字符串（因为表单控件值始终是字符串）。因此，当您这样做时：

num1 + 0.625

这些值连接为字符串，而不是作为数字添加。所以如果 num1 的值是 57 ，那么上述表达式的结果将是字符串 570.625 。因为进行了其他算术运算，最终结果为：

(num1 + 0.625)/(6.25 - 0.5)

将是一个数字。

简单的解决方法是使用一元+运算符将 num1 转换为数字：

var num1 = +document.getvalue.width.value;

或 

var acc1 = (+num1 + 0.625)/(6.25 - 0.5)

你也可以更明确地使用数字作为函数：

var num1 = Number(document.getvalue.width.value);
相关文章：