addEventListener is not working when defined into a new element

Question

I'm trying to make a submit button which will send a form that I create when another button is clicked, but the addEventListener doesn't work.

I'll post the snippet but due to some style problems it may look awfull (sorry for that). But the problem is after I click the new button created, it should tell me what value is in the name label input, but it does nothing. Also it appears that the function runs once when I declare it, why is this happening?

I'm new to javascript by the way.

var numCuentas = 0;
var baseDeDatos = new Array();
var butCrear = document.getElementById('creacion');
var butMost = document.getElementById('mostrador');

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

/*function check(arr)
 {
			for(var i = 0; i<arr.length;i++)
			{
				if(arr[i].value)
			}
		}*/

function cuentaBancaria(nomb, apell, saldo) {
  var nombCuenta = nomb;
  var apellCuenta = apell;
  var saldoCuenta = saldo;
  var numeroDCuenta = numC;
  this.mostrarData = function() {

  }

}
butCrear.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
  var newDiv = document.createElement('div');
  newDiv.setAttribute("id", "forms");
  var acheOne = document.createElement('h3');
  acheOne.textContent = "INGRESE SUS DATOS:";
  newDiv.appendChild(acheOne);
  var listForm = document.createElement('ul');

  var nameVal = ["nombre", "apellido", "saldo"];
  for (var i = 0; i < nameVal.length; i++) {
    var liNew = document.createElement('li');
    var inpNew = document.createElement('input')
    inpNew.setAttribute("type", "text");
    inpNew.setAttribute("autocomplete", "off");
    inpNew.setAttribute("name", nameVal[i]);
    inpNew.setAttribute("id", nameVal[i]);
    var labelNew = document.createElement('label');
    var upcas = nameVal[i].toUpperCase();
    labelNew.textContent = upcas + ': ';
    liNew.appendChild(labelNew);
    liNew.appendChild(inpNew);
    listForm.appendChild(liNew);

  }
  newDiv.appendChild(listForm);
  document.getElementById('container').appendChild(newDiv);
  var subBut = document.createElement('input');
  subBut.setAttribute("type", "button");
  subBut.setAttribute("id", "envio");
  subBut.setAttribute("value", "Confirmar");
  document.getElementById('saldo').parentNode.appendChild(subBut);
  subBut.addEventListener("click", validate(), false);

}, false);
butMost.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
}, false)

function validate() {
  var subBut = document.getElementById("envio");
  var listInp = document.getElementById('forms').getElementsByTagName('input');
  alert(listInp[0].value);
  /*if(isNumber(listInp[2]))
			{
				alert("El saldo solo puede ser numerico");
			}
			else if(check(listInp))
			{
				alert("Son necesarios todo los valores pedidos para proceder");
			}
			else
			{

			}*/
}

div {
  border: 1px solid white;
  margin: auto;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
#container {
  color: white;
  width: 65%;
  min-height: 680px;
  background-color: #084D9C;
  font-family: 'Times New Roman', sans-serif;
}
#options,
#forms {
  margin-top: 15px;
  display: inline-block;
  background-color: #0a60c2;
}
#options {
  width: 28%;
  margin-left: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#forms {
  margin-left: 10px;
  padding-left: 15px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;
  width: 61%;
}
h1 {
  text-align: center;
}
li {
  list-style: none;
  margin-left: -4px;
}
input {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
}
html {
  height: 100%;
}
label {
  width: 15%;
  padding-top: 5px;
  float: left;
  font-size: 13px;
  font-family: monospace;
  font-weight: bold;
}
input[type=button] {
  border: none;
  background-color: #ffff99;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  width: 220px;
  height: 30px;
  border-radius: 3px;
}
input[type=button]:disabled {
  background-color: #bfbfbf;
  color: gray;
}
#envio {
  width: 30%;
  float: right;
}

<h1><img src="logonacion.png" alt="BANCO DE LA NACION ARGENTINA" style="width: 35%"></h1>
<div id="container">
  <div id="options">
    <h3>ELIGA SU OPERACION:</h3>
    <input type="button" name="crear" id="creacion" value="Crear nueva cuenta" autocomplete="off">
    <input type="button" name="mostrar" id="mostrador" value="Mostrar datos" autocomplete="off">
  </div>
</div>

Answer 1

The problem is this line:

subBut.addEventListener("click", validate(), false);

What you're trying to do is pass the validate function handle to addEventListener, but instead by adding () you're actually executing it. Try this instead:

subBut.addEventListener("click", validate, false);

var numCuentas = 0;
var baseDeDatos = new Array();
var butCrear = document.getElementById('creacion');
var butMost = document.getElementById('mostrador');

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

/*function check(arr)
 {
			for(var i = 0; i<arr.length;i++)
			{
				if(arr[i].value)
			}
		}*/

function cuentaBancaria(nomb, apell, saldo) {
  var nombCuenta = nomb;
  var apellCuenta = apell;
  var saldoCuenta = saldo;
  var numeroDCuenta = numC;
  this.mostrarData = function() {

  }

}
butCrear.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
  var newDiv = document.createElement('div');
  newDiv.setAttribute("id", "forms");
  var acheOne = document.createElement('h3');
  acheOne.textContent = "INGRESE SUS DATOS:";
  newDiv.appendChild(acheOne);
  var listForm = document.createElement('ul');

  var nameVal = ["nombre", "apellido", "saldo"];
  for (var i = 0; i < nameVal.length; i++) {
    var liNew = document.createElement('li');
    var inpNew = document.createElement('input')
    inpNew.setAttribute("type", "text");
    inpNew.setAttribute("autocomplete", "off");
    inpNew.setAttribute("name", nameVal[i]);
    inpNew.setAttribute("id", nameVal[i]);
    var labelNew = document.createElement('label');
    var upcas = nameVal[i].toUpperCase();
    labelNew.textContent = upcas + ': ';
    liNew.appendChild(labelNew);
    liNew.appendChild(inpNew);
    listForm.appendChild(liNew);

  }
  newDiv.appendChild(listForm);
  document.getElementById('container').appendChild(newDiv);
  var subBut = document.createElement('input');
  subBut.setAttribute("type", "button");
  subBut.setAttribute("id", "envio");
  subBut.setAttribute("value", "Confirmar");
  document.getElementById('saldo').parentNode.appendChild(subBut);
  subBut.addEventListener("click", validate, false);

}, false);
butMost.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
}, false)

function validate() {
  var subBut = document.getElementById("envio");
  var listInp = document.getElementById('forms').getElementsByTagName('input');
  alert(listInp[0].value);
  /*if(isNumber(listInp[2]))
			{
				alert("El saldo solo puede ser numerico");
			}
			else if(check(listInp))
			{
				alert("Son necesarios todo los valores pedidos para proceder");
			}
			else
			{

			}*/
}

div {
  border: 1px solid white;
  margin: auto;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
#container {
  color: white;
  width: 65%;
  min-height: 680px;
  background-color: #084D9C;
  font-family: 'Times New Roman', sans-serif;
}
#options,
#forms {
  margin-top: 15px;
  display: inline-block;
  background-color: #0a60c2;
}
#options {
  width: 28%;
  margin-left: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#forms {
  margin-left: 10px;
  padding-left: 15px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;
  width: 61%;
}
h1 {
  text-align: center;
}
li {
  list-style: none;
  margin-left: -4px;
}
input {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
}
html {
  height: 100%;
}
label {
  width: 15%;
  padding-top: 5px;
  float: left;
  font-size: 13px;
  font-family: monospace;
  font-weight: bold;
}
input[type=button] {
  border: none;
  background-color: #ffff99;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  width: 220px;
  height: 30px;
  border-radius: 3px;
}
input[type=button]:disabled {
  background-color: #bfbfbf;
  color: gray;
}
#envio {
  width: 30%;
  float: right;
}

<h1><img src="logonacion.png" alt="BANCO DE LA NACION ARGENTINA" style="width: 35%"></h1>
<div id="container">
  <div id="options">
    <h3>ELIGA SU OPERACION:</h3>
    <input type="button" name="crear" id="creacion" value="Crear nueva cuenta" autocomplete="off">
    <input type="button" name="mostrar" id="mostrador" value="Mostrar datos" autocomplete="off">
  </div>
</div>