Why does a function call that is sent a single parameter, suddenly receive the entire element?

Question

I have a table with various information about item numbers where each line has a quantity input field with an id="itemNumber" and a button that submits the item number to a function (onclick="addItemAndQuantity(itemNumber)"), that then finds all the necessary information from the table, by getting the input field value from the id/item number.

If I enter a quantity and press the button, the function receives itemNumber for the first initial tries. If I then sort the table or switch to another page, and then submits a quantity, the function receives the entire input element with id and classes, like so: input#itemNumber.form-control.w80

And I'm obviously not interested in getting the entire element, and certainly not expecting this behavior, when I just pass in a string object.

The table is controlled with DataTables which may be what influences the behavior, but I can't figure it out, so any help is appreciated.

This is what I get as long as I don't filter or sort the table, before submitting a quantity - and what I expect to get every time no matter what:

If I sort the table or navigate to another page in the table, I get the entire input element passed to the function, not only the string object:

A simplified version of the table looks like this:

<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>

A simplified version of the script is:

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

Answer 1

After some additional trial'n'error i noticed a pattern.

I have 2 types of item numbers. Those that are pure numbers e.g. 300012345 and those that have letters in them e.g. T3730500. All pure numbers got passed in as, well - numbers, and the other ones as strings. And it was only the string types that caused the behavior of passing in the entire input object. (That part still doesn't make sense)

But the solution turned out to be that when I am passing in the item number to the function, I have to (force) pass it in as a string, no matter if it is already a string or a number. So all I had to do was wrap the parameter in single quotes like so:

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

So thank you - you who gave some inputs to a possible solution. While not being the solution I was looking for, it helped me to approach the problem from a different angle.