个人中心
gpt4 book ai didi

javascript - NaN 值在按下 Tab 键或存在 onclick 功能时自动输入

转载 作者：行者123 更新时间：2023-11-30 21:52:44 25 4
gpt4 key购买 nike

你好开发人员/程序员/编码人员.. 当我按 Tab 继续下一行时，自动输入 NaN 值，甚至 onclick 给我 NaN，然后​​总列的总和将为 NaN 并且不会改变.. 我不知道如何删除 NaN 值...请帮助我!这是我的代码:

<html>
<link rel = "stylesheet" href = "styling.css?version=3"></link>
    <body>

    <div id='acctdetails' style='padding-left: 15% '>
            <?php
            echo "USERNAME: ". $_SESSION["dynau"]; 
            ?>

                OR Date: <input type='text' placeholder='OR Date' name='ordate' value='<?php echo date('M, d, Y');?>'>

                OR ID: <input type='text' placeholder='OR ID' name='orid'>

                Payor : <input type='text' placeholder='Payor' name='payor' >
    </div>


    <center>
        <form method="POST">
            <?php       
    $result = mysqli_query($link,"SELECT * FROM account_db");

    echo"<html>";
    echo "<script>";
    echo "function calculate(amount, id){ 
          document.getElementById('total' + id).innerHTML = parseInt(document.getElementById('copy' + id).value) * amount; 
             var x=parseInt(document.getElementById('total' + id).innerHTML);
                var y = document.getElementById('sumtotal').innerHTML;
                var a = y.split(' ');
                var z = parseInt(a[1]) + parseInt(x);
                document.getElementById('sumtotal').innerHTML = 'Total: ' + z;

            }";
    echo "</script>";
    echo"<center>";
    echo "<form method='POST'>";
    echo "<br></br>";
    echo "<table style='border:1px solid black' id='thetable' name='pleasework'>";
    echo"<th>FILES</th>";
    echo"<th>AMOUNT</th>";
    echo"<th>NO. OF COPIES</th>";
    echo"<th>TOTAL AMOUNT</th>";

    $counter = 0;
    while($row = mysqli_fetch_row($result))
    {
        echo"<tr>";
        echo "<td >$row[1] </td>";
        echo "<td align=center>$row[2] </td>";
        echo "<td align=center>
                <input type='number' id='copy" . $counter . "' onkeyup='calculate(" . $row[2] .  ", " . $counter . ")'> 
                </td>";
            echo "<td align=center id='total" . $counter . "'></td>";
        echo"</tr>";
        $counter++;
        }   


    echo"<tr>
            <td  id='sumtotal'>TOTAL: 0</td>
        </tr>";


    echo "</table>";
    echo " <br><div style='padding-left: 15px'><input type='submit' id='btn1' value='Transact' name='transaction' onclick='javascript: window.print()'></div>";
    echo"</center>";
    echo"</html>";      
?>      
    </center>
    </body>
</html>

最佳答案

您的第一个问题在这一行中:

document.getElementById('total' + id).innerHTML = parseInt(document.getElementById('copy' + id).value) * amount;

为了理解问题，您可以自己尝试:

parseInt('')

前面操作的结果是 undefined ，所以:

parseInt('')+amount

将是 NaN (不是数字)。

这意味着您需要在继续计算之前测试该值:

!!ele.value.trim()   --> value is not empty

我建议你使用:

.value (for input field): The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox. Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.

.textContent(for cell with text values): represents the text content of a node and its descendants

代替:

.innerHTML : sets or gets the HTML syntax describing the element's descendants.

此外，为了简化您的代码，您可以考虑遍历 dom 以获取包含在其他两个同级单元格中的值。

在您的案例中使用关键字this。 this关键字代表当前元素，不需要从dom中获取。

片段:

function calculate(ele) {
  if (!!ele.value.trim()) {
      var x = +ele.value * +ele.parentElement.previousElementSibling.textContent.trim();
      var y = +document.getElementById('sumtotal').textContent.trim().split(' ').pop();
      ele.parentElement.nextElementSibling = x;
      var z = x + y;
      document.getElementById('sumtotal').textContent = 'Total: ' + z;
  }
}
<div id='acctdetails' style='padding-left: 15% '>
    USERNAME: ...
    OR Date: <input type='text' placeholder='OR Date' name='ordate' value='01/01/2017'>
    OR ID: <input type='text' placeholder='OR ID' name='orid'>
    Payor : <input type='text' placeholder='Payor' name='payor'>
</div>
<form method="POST"><br/>
    <table style='border:1px solid black' id='thetable' name='pleasework'>
        <th>FILES</th>
        <th>AMOUNT</th>
        <th>NO. OF COPIES</th>
        <th>TOTAL AMOUNT</th>
        <tr>
            <td>1</td>
            <td align=center>11</td>
            <td align=center>
                <input type='number' id='copy1' onkeyup="calculate(this)">
            </td>
            <td align=center id='total1'></td>
        </tr>
        <tr>
            <td id='sumtotal'>TOTAL: 0</td>
        </tr>
    </table>
    <br>

    <div style='padding-left: 15px'><input type='submit' id='btn1' value='Transact' name='transaction'
                                           onclick='javascript: window.print()'></div>
</form>

关于javascript - NaN 值在按下 Tab 键或存在 onclick 功能时自动输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46529342/

25 4 0
文章推荐： c# - 我可以阻止 Entity Framework AddOrUpdate 覆盖某些字段吗？
文章推荐： c# - 根据属性值列出选择的对象范围
文章推荐： c# - 从两个 List<> 生成随机数
文章推荐： c# - 如何对通用约束进行分组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com