He jugado con bucles for muchas veces en el pasado, pero esto se me escapa cuando quiero usarlo con valores de ID en HTML y, además, ponerlos, separados, en una cadena.
Tengo un programa simple hasta ahora con la ayuda de otra pregunta que me permite agregar y eliminar campos de entrada en HTML. Sin embargo, quiero asignar el valor de entrada de cada campo de formulario a una variable cada vez que se agrega una. Jugando, esto parece ser difícil, porque no puedo llamar a una ID en HTML en forma de bucle for.
Al final de todo, quería ponerlos en una cadena dinámica cuando se agregan nuevos campos:
"The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors."Pero cada vez que se agrega una nueva variable (ingresada en un campo agregado), quiero que agregue otro " y " + colorNum#.
El programa parece confundirse si agrego variables con anticipación que aún no existen, o nunca, si no agrego el campo de formulario para ellas.
Por supuesto, crear un bucle for no funciona cuando intento algo como:
var colorNum[i] = document.getElementById("field" + i).valuePorque... eso no está permitido. Tengo problemas para averiguar cómo hacer que esto suceda. En este momento llamé variables para colorNum, pero estoy tratando de hacerlo dinámicamente. Esto es difícil cuando se intenta obtener un valor de un ID y transferirlo a un bucle for.
HTML:
<ul id="fields"> </ul> <a onclick="createinput()">Create an input</a> <p id="commentHere"><p>JS:
var count = 0; window.createinput = function(){ var field_area = document.getElementById('fields') var li = document.createElement("li"); var input = document.createElement("input"); input.id = 'field' +count; input.name = 'field'+count; input.type = "text"; li.appendChild(input); field_area.appendChild(li); //create the removal link var removalLink = document.createElement('a'); removalLink.className = "remove"; removalLink.onclick = function(){ field_area.removeChild(li); count--; } removalLink.appendChild(document.createTextNode('Remove Field')); li.appendChild(removalLink); count++; console.log(input.id); console.log("Count: " + count); var colorNum0 = document.getElementById("field0").value; var colorNum1; var colorNum2; console.log(colorNum0); var comment = "The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors."; document.getElementById("commentHere").innerHTML = comment; }Puede obtener valores de todas las entradas, utilizando el siguiente fragmento de código:
function getInputsData() { const inputs = document.getElementsByTagName('input'); const data = []; for (let inp of inputs) { data.push(inp.value); } return data; }Teniendo en cuenta que no tiene ningún otro campo de entrada. Si es así, puede asignar a cada entrada una clase o identificación, como lo hizo, y obtener los valores:
function getInputsData() { const data = []; const inputs = document.getElementsByClassName('field'); for (let inp of inputs) { data.push(inp.value); } return data; }Para este caso, agregué una clase para cada campo de entrada:
input.classList.add('field')El comentario de Bergi me ayudó bastante para lo que tenía. No revisaré esto hoy, así que pensé que debería marcarlo como respondido por ahora. Lo que tenía estaba bien, solo tenía que asignar colorNum a una matriz. En cuanto a poner esto en mi cadena, tendré que jugar un poco otro día, no es necesario que esté en una pregunta capciosa.
Editar: ¿A menos que alguien tenga una idea para la cadena? Voy a tratar de descubrir cómo enumerar cada elemento de la matriz en la cadena separada por texto sin crear docenas de nuevas variables para cada entrada.