为啥发送单个参数的函数调用会突然收到整个元素？

Posted 2023-03-27

【中文标题】为啥发送单个参数的函数调用会突然收到整个元素？

【英文标题】：Why does a function call that is sent a single parameter, suddenly receive the entire element?为什么发送单个参数的函数调用会突然收到整个元素？

【发布时间】：2021-08-09 01:03:27

【问题描述】：

我有一个表格，其中包含有关项目编号的各种信息，其中每一行都有一个带有 id="itemNumber" 的数量输入字段和一个将项目编号提交给函数的按钮（ onclick="addItemAndQuantity(itemNumber)")，然后通过从 id/item number 获取输入字段值，从 table 中找到所有必要的信息。

如果我输入一个数量并按下按钮，该函数会收到 itemNumber 用于第一次初始尝试。 如果我然后对表格进行排序或切换到另一个页面，然后提交一个数量，该函数会接收带有 id 和类的整个输入元素，如下所示：input#itemNumber.form-control.w80

当我只传入一个字符串对象时，我显然对获取整个元素不感兴趣，当然也不期待这种行为。

表格由DataTables 控制，这可能会影响行为，但我无法弄清楚，因此感谢您的帮助。

只要我在提交数量之前不过滤或排序表格，这就是我得到的 - 以及我每次都希望得到的结果：

如果我对表格进行排序或导航到表格中的另一个页面，我会将整个输入元素传递给函数，而不仅仅是字符串对象：

表格的简化版本如下所示：

<table class="table table-sm table--hover table--bordered" id="dataTableAddItemToOrder">
   <thead>
      <tr>
         <th scope="col">Item number</th>
         <th scope="col">Description</th>
         <th scope="col">Quantity</th>
         <th scope="col">Actions</th>
      </tr>
   </thead>
   <tbody>
      @foreach (var listItem in Model.AllItems)
      
         <tr>
            <td>@listItem.ItemNumber</td>
            <td>@listItem.Description</td>
            <td>
               <input type="text" id="@listItem.ItemNumber" name="itemQuantity" placeholder="0" class="form-control w80" autocomplete="off" />
            </td>
            <td>
               <button type="button" class="btn hsa-btn-primary" onclick="addItemAndQuantity(@listItem.ItemNumber)">Add</button>
            </td>
         </tr>
      
   </tbody>
</table>

脚本的简化版本是：

function addItemAndQuantity(itemNumber) 
     let input = document.getElementById(itemNumber);

【参考方案1】：

对不起，我弄错了，试试：

//your var
let input = document.getElementById(itemNumber);

//the value of text field: 
input.value

【讨论】：

好的，再次感谢您，但问题是传入函数的内容，它应该是字符串项目编号，例如300012345，但我得到的是整个输入对象。我用一些描述性图片更新了我的帖子，以更好地解释我的期望和实际得到的。

【参考方案2】：

经过一些额外的试错后，我注意到了一种模式。

我有 2 种类型的项目编号。那些是纯数字的，例如300012345 和那些有字母的，例如T3730500。所有纯数字都作为数字传入，其他的作为字符串传入。而且只有字符串类型会导致传入整个输入对象的行为。 （那部分仍然没有意义）

但解决方案是，当我将项目编号传递给函数时，我必须（强制）将其作为字符串传递，无论它已经是字符串还是数字。所以我所要做的就是将参数用单引号括起来，如下所示：

onclick="addItemAndQuantity('@listItem.ItemNumber')"

非常感谢您 - 您为可能的解决方案提供了一些意见。虽然不是我正在寻找的解决方案，但它帮助我从不同的角度解决问题。