Tengo un formulario con 21 elementos de tipo 'input', 'select' y 'textArea', y tengo una matriz de 21 identificadores de elementos que corresponden a estos elementos.
Estoy tratando de extraer los 21 valores de estos elementos y concatenarlos en una cadena larga, con una pestaña insertada entre cada valor. La intención es poner esta cadena en el portapapeles y pegarla manualmente en una fila en una hoja de cálculo.
En el siguiente código (que no funciona), en la línea 'nextValue = ...', la consola dice que nextElement es nulo, lo que indica que no existe un elemento con esa identificación. Pero existe. ¿Podría alguien señalar qué estoy haciendo mal aquí? Gracias.
//this function is called by the onclick event of a button. function clipToExcel() { let element_Ids = ['id1', 'id2', 'id3', 'id4', 'id5', 'id6', 'id7', 'id8', 'id9', 'id10', 'id11', 'id12', 'id13', 'id14', 'id15', 'id16', 'id17', 'id18', 'id19', 'id20', 'id21']; let nextElement, nextValue, valueString = ""; for (let i = 0; i < element_Ids.length; i++) { nextElement = document.getElementById(element_Ids[i]); nextValue = nextElement.value; // console.log(nextValue); valueString += nextValue + "\t"; } navigator.clipboard.writeText(valueString); alert('Data is now on the Clipboard in a format that can be Pasted into Excel'); }Tienes todo en un <form> entonces es más fácil de lo que piensas. Los detalles se comentan en el ejemplo a continuación. Para obtener más información sobre la interfaz del formulario, lea la propiedad .elements .
// Reference the form const form = document.forms[0]; // Reference all fields of form const io = form.elements; // this is just to generate inputs for demo for (let i = 0; i < 21; i++) { io[i].value = i; } /* Gather all form controls into a HTMLCollection then convert it into an array */ const allFieldsNamedA = io.A; // Iterate with .map() const str = [...allFieldsNamedA].map(inp => inp.value + '\t'); // Then .join() the array into one string console.log(str.join('')); .as-console-row::after { width: 0; font-size: 0; } .as-console-row-code { width: 100%; word-break: break-word; } <form> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> <input name='A'> </form>