Así que hice un botón que crea un marcador de posición de entrada cada vez que se hace clic (limitado a 4). El problema es que estoy usando el método de publicación y haciendo .value en mi código devuelve un TypeError, pero no los marcadores de posición predeterminados (por ejemplo: m1k1). Los ID se crean y son similares a los predeterminados con la excepción de un número que se genera en un bucle for.
Cuando escribo valores solo en los marcadores de posición predeterminados, todo está bien.
dos elementos
let m1k1 = document.querySelector('#mon1wk1') let m1k2 = document.querySelector('#mon1wk2')eventListener
let num = 1 function addWeek(e) { e.preventDefault() num++ let mkInput = document.createElement('input') let forma = document.querySelector('#forma') mkInput.placeholder = " " mkInput.id = 'mon1wk' + num mkInput.type = 'text' forma.append(mkInput) if (num === 4) { addwk1.disabled = true;Donde los valores se almacenan en un objeto
pushMonths.firstMonth.Week1 = m1k1.value, pushMonths.firstMonth.Week2 = m1k2.value,Cualquier ayuda es apreciada
En el código OP, el num es igual a 1, por lo que cuando la identificación se asigna a una nueva <input> cuando el usuario hace clic en el <button> , la primera <input> se asigna id="mon1wk1" y la segunda <input> se asigna id="mon1wk2" . Entonces, ahora hay 2 pares de <input> comparten la misma id que no es válida, además de que la id no puede encontrar los duplicados, ya que el navegador deja de buscar tan pronto como encuentra la primera id , lo que explica por qué los <input> estáticos siempre funcionaron.
En el siguiente ejemplo, el objeto sigue el siguiente patrón:
figura yo
const obj = { mw: [2, 1], // [2nd month, 1st week] mon1: { // Each mon* object can have up to 4 wk* properties wk1: mon1wk1.value, ⇓⇓⇓ wk4: mon1wk4.value }, mon2: { wk1: mon2wk1.value } };Los detalles se comentan en el ejemplo.
// Reference <form> const frm = document.forms.forma; /** * @param {object} obj - Used to keep data * @param {array} obj.mw - Keeps count of current * month at mw[0] and week at mw[1] * @param {object} obj.mon* - Month holds 4 weeks * @param {any} obj.wk* - Week holds associated * <input> value */ const obj = { mw: [1, 2], mon1: { wk1: 5, wk2: 4 } }; let m = obj.mw[0]; let w = obj.mw[1]; // Bind submit event to <form> frm.onsubmit = addWeek; function addWeek(e) { // Stop <form> from killing page e.preventDefault(); // Build new <input> let mk = document.createElement('input'); mk.type = 'text'; frm.append(mk); /* Incerment 'w' If 'w' is greater than 4... ...add a new 'mon*' object and assign it a new 'w' *//* Otherwise assign a new property to current 'mon*' Assign id to new <input> with this pattern: `mon${m}wk${w}` */ ++w; if (w > 4) { ++m; w = 1; obj['mon' + m] = { ['wk' + w]: 0 }; obj.mw[0] = m; obj.mw[1] = 1; } else { obj['mon' + m]['wk' + w] = 0; obj.mw[1] += 1; } mk.id = 'mon' + m + 'wk' + w; console.log(obj); } // Bind input event to <form> frm.oninput = saveData; /* When a user inputs a value into an <input>, assign the value to the associated property of obj. The value is coerced into a number: +mk.value Remove the '+' if you want string instead. */ function saveData(e) { const mk = e.target; let id = mk.id; obj[id.slice(0, 4)][id.slice(4)] = +mk.value; console.log(obj); } form { display: flex; } button, input { display: inline-block; } <form id='forma'> <button id='addWk'>Add Week</button><br><hr> <input id='mon1wk1' value='5'> <input id='mon1wk2' value='4'> </form>