Tengo una función que crea un elemento de input y lo agrega a otro elemento.

Estoy tratando de hacerlo, de modo que si se usa una matriz como parámetro de esta función, los datos de la matriz se usan como el value del elemento de input . Si no se especifica una matriz como parámetro, el valor de entrada debe estar vacío.

Aquí está mi código

HTML

 <div id="app></div>

JavaScript

 let app = document.getElementById('app') let people = [["Adam",10],["Peter",90],["John",30],["Stephen",50]] for (var key in people) { showName(people[key]) } function showName(pData) { let singleName = document.createElement('input') if (typeof pData !== 'undefined') { singleName.value = pData[0] } app.append(singleName) } let button = document.createElement('button') button.addEventListener('click',showName) button.innerHTML = "Add name" app.prepend(button)

Esto funciona bien, puedo ejecutar la función con un parámetro y sin parámetro y funciona como se esperaba.

Sin embargo, cuando configuro la función para que se active a través de un detector de eventos y sin un parámetro, puedo ingresar una entrada con un valor de 'indefinido', este no es el caso si ejecuto la función escribiendo showName().

Por lo tanto, esto me lleva a creer que se pasa algún tipo de parámetro cuando el evento se activa a través de un detector de eventos. ¿Es este el caso? Y si es así, ¿cómo hago para que el botón cree un elemento de input sin valor?