Como obtener valores de elementos creados en el DOM

publicado por: Anonymous

Buenas a todos… Mi objetivo es meter en un array los datos que vaya metiendo de dos inputs de mi formulario, con la salvedad de que al pulsar el boton más, se guarde la información en un array, y se crea otro elemento nuevo “caja /div”, dos inputs más para rellenar con sus dos botón correspodiente. Y si doy al botón menos, elimine la informacion de ese registro en el array.

El problema que tengo es el siguiente: He conseguido crear los dos inputs más los dos botones de “+” y “-” y eliminar los inputs y los botones. No consigo meter información en el array, solo de la primera caja de inputs, las siguientes cajas no consigo meter la información en el array. Os dejo mi código para que le echeis un vistazo y espero que alguién me ayude. Gracias!

FICHERO HTML:

_x000D_

_x000D_

//cargamos el documento, sin el contenido multimedia_x000D_
_x000D_
document.addEventListener("DOMContentLoaded",main);_x000D_
function main(){_x000D_
	var formacion = new Array();_x000D_
_x000D_
	_x000D_
	//recogemos en un array los datos que haya en formacion_x000D_
	function recogerFormacion(){_x000D_
		var anno = document.getElementById("year").value;_x000D_
		var curso = document.getElementById("curso").value;_x000D_
		var lista = document.getElementById("listaFormacionFinal");_x000D_
		formacion.push(anno+" "+curso);_x000D_
		console.log(formacion);_x000D_
		var datos = document.createElement("li");_x000D_
		datos.innerHTML = anno+" "+curso;_x000D_
		lista.appendChild(datos);_x000D_
	}	_x000D_
_x000D_
	//function para el botón "+"_x000D_
	function anadirCaja(){_x000D_
		var divPrimero = document.getElementById("primero");_x000D_
		var divResto = document.createElement("DIV");_x000D_
		divPrimero.append(divResto);_x000D_
		divResto.setAttribute("class", "visible");_x000D_
		divResto.setAttribute("id", "primero");_x000D_
		divResto.setAttribute("name", "cajas");				_x000D_
		var inputAnno = document.createElement("input");_x000D_
		var inputCurso = document.createElement("input");_x000D_
		var inputBotonMenos = document.createElement("input");_x000D_
		var inputBotonMas = document.createElement("input");_x000D_
		inputAnno.setAttribute("type","text");_x000D_
		inputAnno.setAttribute("id","year");_x000D_
		inputAnno.setAttribute("size","2");_x000D_
		inputCurso.setAttribute("type","text");_x000D_
		inputCurso.setAttribute("id","curso");_x000D_
		inputCurso.setAttribute("size","50");_x000D_
		inputBotonMenos.setAttribute("type","button");_x000D_
		inputBotonMenos.setAttribute("id","menos");_x000D_
		inputBotonMenos.setAttribute("value","-");_x000D_
		inputBotonMas.setAttribute("type","button");_x000D_
		inputBotonMas.setAttribute("id","mas");_x000D_
		inputBotonMas.setAttribute("value","+");_x000D_
		inputBotonMas.addEventListener("click", anadirCaja);_x000D_
        inputBotonMenos.addEventListener("click",quitarCaja);_x000D_
		divResto.append(inputAnno);_x000D_
		divResto.append(inputCurso);_x000D_
		divResto.append(inputBotonMenos);_x000D_
		divResto.append(inputBotonMas);_x000D_
		recogerFormacion();_x000D_
	}_x000D_
	//funcion para el boton "-"_x000D_
	function quitarCaja(){_x000D_
		var cajas = document.getElementsByName("cajas");_x000D_
		var cajaEliminar = document.getElementById("segundo");_x000D_
		var totalCajas = cajas.length;_x000D_
		console.log(totalCajas);_x000D_
		if(totalCajas == 1){_x000D_
			alert("No se puede eliminar");_x000D_
			_x000D_
		} else {_x000D_
			cajaEliminar.parentNode.removeChild(cajaEliminar);_x000D_
		}_x000D_
    }_x000D_
_x000D_
    //Ocultamos el formulario y mostramos los datos recogidos_x000D_
    function mostrarDatosFinales(){_x000D_
		if(recogerFormacion()){_x000D_
			var ocultarFormulario = document.getElementById("contenedor");_x000D_
			ocultarFormulario.className="oculto";_x000D_
			var mostrarDatos = document.getElementById("datosFinales");_x000D_
			mostrarDatos.className="visibleFinal";_x000D_
		}_x000D_
_x000D_
	}_x000D_
_x000D_
	//boton de reset: blanqueamos los campos_x000D_
	function borrarDatos(){_x000D_
		document.forms.prueba.nombre.value ="";_x000D_
		document.forms.prueba.apellidos.value ="";_x000D_
		document.forms.prueba.dni.value ="";_x000D_
		document.forms.prueba.correo.value ="";_x000D_
		document.forms.prueba.year.value ="";_x000D_
		document.forms.prueba.curso.value ="";_x000D_
		document.forms.prueba.textarea.value ="";_x000D_
	}_x000D_
	var boton = document.getElementById("boton");_x000D_
	boton.addEventListener("click",mostrarDatosFinales);_x000D_
	var botonr = document.getElementById("botonb");_x000D_
	botonr.addEventListener("click",borrarDatos);_x000D_
	var mas = document.getElementById("mas");_x000D_
    mas.addEventListener("click",anadirCaja);_x000D_
    var menos = document.getElementById("menos");_x000D_
    menos.addEventListener("click",quitarCaja);_x000D_
	_x000D_
}

_x000D_

#contenedor{_x000D_
	width: 75%;_x000D_
	margin: 0 auto;_x000D_
}_x000D_
input{_x000D_
	display: block;_x000D_
	border-radius: 3px;_x000D_
}_x000D_
#boton{_x000D_
	margin-top: 5px;_x000D_
}_x000D_
#contenedor > #formulario >p{_x000D_
	font-size: 25px;_x000D_
	font-family: Courier, "Lucida Console", monospace;_x000D_
	font-weight: bold;_x000D_
}_x000D_
#primero > input {_x000D_
	display: inline;_x000D_
	border-radius: 3px;_x000D_
	margin: 2px;_x000D_
_x000D_
}_x000D_
input#mas{_x000D_
	margin-left: 15px;	_x000D_
	border-radius: 7px;_x000D_
}_x000D_
input#menos{_x000D_
	margin-left: 15px;	_x000D_
	border-radius: 7px;_x000D_
}_x000D_
.oculto{_x000D_
	display:none;_x000D_
}_x000D_
.visibleFinal p{_x000D_
	display:inline;_x000D_
	width: 75%;_x000D_
	margin-left: 0px;_x000D_
}_x000D_
#primero > input {_x000D_
	display: inline;_x000D_
	border-radius: 3px;_x000D_
	margin: 3px;_x000D_
_x000D_
}_x000D_
#primero > input#mas{_x000D_
	margin-left: 18px;	_x000D_
	border-radius: 7px;_x000D_
}_x000D_
#primero > input#menos{_x000D_
	margin-left: 17px;	_x000D_
	border-radius: 7px;_x000D_
}_x000D_
#datosFinales{_x000D_
	width: 75%;_x000D_
	margin: 0 auto;_x000D_
}div > div {_x000D_
	display: inline-block;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
	<title>Práctica a Entregar</title>_x000D_
	<meta charset="utf-8">_x000D_
	<script type="text/javascript" src="1.js">_x000D_
		_x000D_
	</script>_x000D_
	<link rel="stylesheet" type="text/css" href="practica1.css">_x000D_
</head>_x000D_
<body>_x000D_
	<h1>Solicitud de empleo</h1>_x000D_
	<div id="contenedor" class="visible">		_x000D_
		_x000D_
		<form name="prueba" action="#" id="formulario">_x000D_
			<p>Formacion:</p>_x000D_
			<div class="visible" id="primero" name="cajas">_x000D_
				<label for="year"></label>_x000D_
				<input type="text" id="year" size="2" name="year">_x000D_
				<label for="curso"></label>_x000D_
				<input type="text" id="curso" size="50"  name="curso">_x000D_
				<input type="button" id="menos" value="-">_x000D_
				<input type="button" id="mas" value="+">_x000D_
			</div>_x000D_
			<button type="button" id="boton" value="validar">validar</button> _x000D_
			<button type="button" id="botonb" value="borrar">Borrar</button>_x000D_
		</form>_x000D_
	</div>_x000D_
	<div id="datosFinales" class="oculto">_x000D_
		<p>Formacion:</p>_x000D_
		<ul id="listaFormacionFinal"></ul>_x000D_
	</div>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

Con esta respuesta pretendo enfocar tu problema desde otro punto de vista, intentando dar una solución más simple a algo que, de acuerdo a tu lógico inicial parecía ser complicado.

El punto esencial de esta solución está en la forma de agregar/borrar los datos. En vez de tener dos botones dedicados a cada acción, podemos manejar la acción de agregar/borrar mediante un checkbox, el cual, cuando esté marcado indicará que ese elemento debe ser agregado y cuando esté desmarcado ese elemento deberá ser borrado.

Aquí el agregado se hace de forma inmediata, porque desconozco todo el contexto de tu programa. No obstante, esta aproximación de resolución del problema podría tener una ventaja adicional si así lo prefirieses: en lugar de estar constantemente añadiendo y quitando podrías, al terminar, recorrer todos los checkbox, agregando sólo aquellos que estén marcados (haciéndolo así ganarías en rendimiento y simplicidad).

Otra de las ventajas de este código es que crea elementos con ids diferentes, por lo que los puedes tratar como elementos únicos en cualquier momento.

Para un código más robusto, sería necesario someter el array a una función que evite los duplicados, en el caso de que se introduzcan dos valores que sean iguales, y que ordene el array en el caso de que elementos de más arriba sean desmarcados o luego marcados… fíjate que todo eso se evitaría con solamente construir tu array al final, desde un botón de validación que leyese todos los checkbox, recuperando únicamente los valores de aquellos que estén marcados.

Otra ventaja en ese sentido es la posibilidad de corregir cualquier valor que se haya escrito con error y que decidas cambiar posteriormente…

Quizá haya formas más fáciles de hacer esto. No soy un gran experto en JS, pero creo que esta solución podría ayudarte a encontrar una salida más adecuada a tu problema.

Espero te sirva.

Nota: Por falta de tiempo he elaborado solamente el código de agregar/borrar los elementos. Las otras acciones, si te decides por esta aproximación, se verían simplificadas y serían incluso, quizás, innecesarias.

_x000D_

_x000D_

document.addEventListener("DOMContentLoaded",main);_x000D_
function main(){_x000D_
	var formacion = new Array();_x000D_
	var mas = document.getElementById("mas");_x000D_
	var chkAgregar = document.getElementById("chkAgregar");_x000D_
	chkAgregar.addEventListener("change", anadirCajaNew, true);_x000D_
	_x000D_
	var unaVez = function(element) { 	_x000D_
		element.addEventListener('click', function(event) {_x000D_
			var idCount=formacion.length;_x000D_
			idYear="year"+idCount;_x000D_
			idCurso="curso"+idCount;_x000D_
			var divPrimero = document.getElementById("primero");_x000D_
			var divResto = document.createElement("div");_x000D_
			divPrimero.append(divResto);_x000D_
			divResto.setAttribute("class", "visible"+idCount);_x000D_
			divResto.setAttribute("id", "id"+idCount);_x000D_
			divResto.setAttribute("name", "cajas");				_x000D_
			var inputAnno = document.createElement("input");_x000D_
			var inputCurso = document.createElement("input");_x000D_
			var chkBox = document.createElement("input");_x000D_
			var lblBox = document.createElement("label");_x000D_
	_x000D_
			chkBox.setAttribute("type","checkbox");_x000D_
			chkBox.setAttribute("chk",idYear);_x000D_
			chkBox.setAttribute("id", "id"+idCount);_x000D_
			lblBox.innerHTML="Marque para agregar";_x000D_
_x000D_
			inputAnno.setAttribute("type","text");_x000D_
			inputAnno.setAttribute("id",idYear);_x000D_
			inputAnno.setAttribute("size","2");_x000D_
			inputCurso.setAttribute("type","text");_x000D_
			inputCurso.setAttribute("id",idCurso);_x000D_
			inputCurso.setAttribute("size","50");_x000D_
	        chkBox.addEventListener("click",unaVez(chkBox));_x000D_
	        chkBox.addEventListener("change",anadirCajaNew);_x000D_
	_x000D_
			divResto.append(inputAnno);_x000D_
			divResto.append(inputCurso);_x000D_
			divResto.append(chkBox);_x000D_
			divResto.append(lblBox);_x000D_
_x000D_
		}, {once: true});	_x000D_
	_x000D_
	};_x000D_
_x000D_
	unaVez(chkAgregar);_x000D_
_x000D_
	function anadirCajaNew(e){_x000D_
		thisParent=e.srcElement.parentNode;_x000D_
		thisInputs=thisParent.getElementsByTagName('input');_x000D_
		anno=thisInputs[0].value;_x000D_
		curso=thisInputs[1].value;_x000D_
_x000D_
		if (this.checked){_x000D_
_x000D_
			formacion.push(anno+" "+curso);_x000D_
			console.log(formacion);_x000D_
_x000D_
		}else{_x000D_
_x000D_
			strId=this.id;_x000D_
			intIndex=strId.replace(/D/g, "");_x000D_
			formacion.splice(intIndex, 1);_x000D_
			console.log(formacion);_x000D_
		_x000D_
		}_x000D_
	}_x000D_
}

_x000D_

	<h1>Solicitud de empleo</h1>_x000D_
	<div id="contenedor" class="visible">		_x000D_
		_x000D_
		<form name="prueba" action="#" id="formulario">_x000D_
			<p>Formacion:</p>_x000D_
			<div class="visible" id="primero" name="cajas">_x000D_
				<label for="year"></label>_x000D_
				<input type="text" id="year1" size="2" name="year">_x000D_
				<label for="curso"></label>_x000D_
				<input type="text" id="curso1" size="50"  name="curso">_x000D_
				<input id="chkAgregar" type="checkbox" name="chkMas" />_x000D_
				<label for="chkMas">Marque para agregar</label>_x000D_
_x000D_
			</div>_x000D_
			<button type="button" id="boton" value="validar">validar</button> _x000D_
			<button type="button" id="botonb" value="borrar">Borrar</button>_x000D_
		</form>_x000D_
	</div>_x000D_
	<div id="datosFinales" class="oculto">_x000D_
		<p>Formacion:</p>_x000D_
		<ul id="listaFormacionFinal"></ul>_x000D_
	</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *