indexing into a nodelist results in an undefined value

Question

In my current code snippet, I am using the following:

const modelInputs = document.getElementsByName('jpd-model')
console.log(modelInputs)

This code returns a NodeList of all the matching elements.

However, if I modify the code to this:

const modelInputs = document.getElementsByName('jpd-model')
console.log(modelInputs[0])

It now returns undefined.

Based on my understanding of the documentation, I should still be able to access it as an array-like object.

I expected console.log(modelInputs[0]) to display the first item from the nodelist modelInputs.

Here is an example of HTML elements with the specified name:

<input type="text" class="form-control" name="jpd-model" id="jpd-model-1" aria-describedby="emailHelp" value="XXXX-900L-XXXX~(120,277)">

I am using the latest version of Brave browser on Linux for testing.

Updates:

Added HTML element
Correction: the previously copied element was incorrect. The above one is accurate. I have both 'make' and 'make-orig' debugging output.

Answer 1

Answer №1

Instead of using "jpd-model" to retrieve your list, you should be using "jpd-make-orig". Using the wrong name will cause your form to fail.

To achieve the desired result, consider using a different selector like getElementsByClassName.

Take a look at this working demo:

html:

<input type="text" class="form-control" name="jpd-make-orig" id="jpd-make- 
orig-1" aria-describedby="emailHelp" value="LITHONIA" readonly="">

js:

 const modelInputs = document.getElementsByClassName('form-control')

 console.log(modelInputs[0])

Answer 2

Instead of using "jpd-model" to retrieve your list, you should be using "jpd-make-orig". Using the wrong name will cause your form to fail.

To achieve the desired result, consider using a different selector like getElementsByClassName.

Take a look at this working demo:

html:

<input type="text" class="form-control" name="jpd-make-orig" id="jpd-make- 
orig-1" aria-describedby="emailHelp" value="LITHONIA" readonly="">

js:

 const modelInputs = document.getElementsByClassName('form-control')

 console.log(modelInputs[0])