Почему вызов функции, которая отправляет один параметр, внезапно получает весь элемент целиком?

#javascript #razor #datatables #asp.net-mvc-5 #.net-4.0

Вопрос:

У меня есть таблица с различными информация о позиции цифр, где каждая строка имеет количество, поле ввода с идентификатором=»выражение itemnumber» и кнопка, которая отправляет код номенклатуры функция (функция onclick=»addItemAndQuantity(выражение itemnumber)»), что затем находит всю необходимую информацию из таблицы, получая в поле ввода значения из идентификатора/номер товара.

Если я введу количество и нажму кнопку, функция получит его номер для первых начальных попыток. Если я затем отсортирую таблицу или переключусь на другую страницу, а затем отправлю количество, функция получит весь входной элемент с идентификатором и классами, например: input#ItemNumber.form-control.w80

И я, очевидно, не заинтересован в получении всего элемента и, конечно, не ожидаю такого поведения, когда я просто передаю строковый объект.

Таблица управляется таблицами данных, которые могут влиять на поведение, но я не могу этого понять, поэтому любая помощь будет признательна.

Это то, что я получаю, пока я не фильтрую или не сортирую таблицу, прежде чем отправлять количество — и то, что я ожидаю получать каждый раз, несмотря ни на что: введите описание изображения здесь

Если я отсортирую таблицу или перейду на другую страницу таблицы, я получу весь входной элемент, переданный функции, а не только строковый объект: введите описание изображения здесь

Упрощенная версия таблицы выглядит следующим образом:

 <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
 

Комментарии:

1. Хорошо, еще раз спасибо, но проблема в том, что передается в функцию, которая должна быть только строковым номером элемента, например 300012345, но я получаю весь входной объект. Я обновил свой пост некоторыми описательными картинками, чтобы лучше объяснить, чего я ожидаю и что я на самом деле получаю.

Ответ №2:

После некоторых дополнительных проб и ошибок я заметил закономерность.

У меня есть 2 типа номеров товаров. Те, которые являются чистыми числами, например, 300012345, и те, в которых есть буквы, например, T3730500. Все чистые числа передавались как, ну — числа, а остальные-как строки. И только строковые типы вызывали поведение передачи всего входного объекта. (Эта часть все еще не имеет смысла)

Но решение оказалось в том, что, когда я передаю номер элемента функции, я должен (принудительно) передать его в виде строки, независимо от того, является ли это уже строкой или числом. Поэтому все, что мне нужно было сделать, это заключить параметр в одинарные кавычки, вот так:

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

Так что спасибо вам — вам, кто внес свой вклад в возможное решение. Хотя это и не было решением, которое я искал, оно помогло мне подойти к проблеме с другой стороны.