为什么发送单个参数的函数调用突然接收到整个元素?
Why does a function call that is sent a single parameter, suddenly receive the entire element?
我有一个 table,其中包含有关商品编号的各种信息,其中每一行都有一个带有 id="itemNumber" 的数量输入字段和一个提交项目编号添加到函数 (onclick="addItemAndQuantity(itemNumber)"),然后通过从 id/item个数.
如果我输入数量并按下按钮,该函数会在第一次初始尝试时收到 itemNumber。
如果我随后对 table 进行排序或切换到另一个页面,然后提交一个数量,该函数将接收带有 id 和 类 的整个输入元素,如下所示:input#itemNumber.form-control.w80
当我只传入一个字符串对象时,我显然对获取整个元素不感兴趣,当然也不希望出现这种行为。
table 由 DataTables 控制,这可能是影响行为的因素,但我无法弄清楚,因此不胜感激。
这就是我在提交数量之前不对 table 进行过滤或排序时得到的结果 - 以及无论如何我每次都希望得到的结果:
如果我对 table 进行排序或导航到 table 中的另一个页面,我会得到传递给函数的整个输入元素,而不仅仅是字符串对象:
table 的简化版本如下所示:
<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);
}
对不起,我弄错了,试试:
//your var
let input = document.getElementById(itemNumber);
//the value of text field:
input.value
经过一些额外的反复试验后,我注意到了一个规律。
我有两种货品编号。那些纯数字,例如300012345 和那些有字母的,例如T3730500。所有纯数字都作为数字传递,其他的作为字符串传递。并且只有字符串类型导致传递整个输入对象的行为。 (那部分还是没看懂)
但解决方案是,当我将项目编号传递给函数时,我必须(强制)将其作为字符串传递,无论它已经是字符串还是数字。所以我所要做的就是将参数用单引号括起来,如下所示:
onclick="addItemAndQuantity('@listItem.ItemNumber')"
非常感谢您 - 您为可能的解决方案提供了一些意见。虽然不是我正在寻找的解决方案,但它帮助我从不同的角度解决问题。
我有一个 table,其中包含有关商品编号的各种信息,其中每一行都有一个带有 id="itemNumber" 的数量输入字段和一个提交项目编号添加到函数 (onclick="addItemAndQuantity(itemNumber)"),然后通过从 id/item个数.
如果我输入数量并按下按钮,该函数会在第一次初始尝试时收到 itemNumber。 如果我随后对 table 进行排序或切换到另一个页面,然后提交一个数量,该函数将接收带有 id 和 类 的整个输入元素,如下所示:input#itemNumber.form-control.w80
当我只传入一个字符串对象时,我显然对获取整个元素不感兴趣,当然也不希望出现这种行为。
table 由 DataTables 控制,这可能是影响行为的因素,但我无法弄清楚,因此不胜感激。
这就是我在提交数量之前不对 table 进行过滤或排序时得到的结果 - 以及无论如何我每次都希望得到的结果:
如果我对 table 进行排序或导航到 table 中的另一个页面,我会得到传递给函数的整个输入元素,而不仅仅是字符串对象:
table 的简化版本如下所示:
<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);
}
对不起,我弄错了,试试:
//your var
let input = document.getElementById(itemNumber);
//the value of text field:
input.value
经过一些额外的反复试验后,我注意到了一个规律。
我有两种货品编号。那些纯数字,例如300012345 和那些有字母的,例如T3730500。所有纯数字都作为数字传递,其他的作为字符串传递。并且只有字符串类型导致传递整个输入对象的行为。 (那部分还是没看懂)
但解决方案是,当我将项目编号传递给函数时,我必须(强制)将其作为字符串传递,无论它已经是字符串还是数字。所以我所要做的就是将参数用单引号括起来,如下所示:
onclick="addItemAndQuantity('@listItem.ItemNumber')"
非常感谢您 - 您为可能的解决方案提供了一些意见。虽然不是我正在寻找的解决方案,但它帮助我从不同的角度解决问题。