Tengo una idea para crear múltiples entradas a partir de una sola entrada y obtener todos sus valores. Pero solo puedo obtener el primer valor de entrada pero no el resto. ¿Alguien puede decirme cómo hacerlo?
const singleInput = document.getElementById('singleInput') const demo = document.getElementById('demo') const demo2 = document.getElementById('demo2') const multipleInputValue = [] singleInput.addEventListener('keyup', function (event) { if (event.key == 'Enter') { demo2.innerHTML += singleInput.value + '<input type="number" class="multipleInput" onkeyup="getValue(event)">' + '<br>' multipleInput = document.getElementsByClassName('multipleInput') } }) function getValue(event) { if (event.key == 'Enter') { multipleInputValue.push(multipleInput[0].value) } }Y aquí está el código HTML para esto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Coding</title> </head> <body> <input type="text" id="singleInput"> <div id="demo"> <p id="demo2"></p> </div> <script src="script.js"></script> </body> </html>Su función getValue (vinculada al evento onkeyup de la entrada adjunta en el tiempo de ejecución) estaba tratando de obtener el valor de la entrada con multipleInput[0].value pero ninguna pieza de código estaba enviando valores a esa matriz.
Un mejor enfoque era simplemente usar event.target para recuperar el objeto que activaba el evento desde el propio controlador de eventos.
Mostré aquí una demostración simplificada de su código que muestra ese concepto.
Cuando presiona Intro en la primera entrada, aparecerá la segunda... después, si presiona las teclas dentro de esa nueva entrada, un archivo console.log mostrará la actividad, incluido cuándo presionará Intro (y el valor se insertará a la matriz).
Pero la lógica general no estaba muy clara, así que no pude continuar.
const multipleInput = []; const singleInput = document.getElementById('singleInput'); singleInput.addEventListener('keyup', function (event) { if (event.key == 'Enter') { console.log('singleInput: pressed ENTER'); const inputElement = event.target; const target = document.getElementById('target'); target.innerHTML += inputElement.value + '<input type="number" class="multipleInput" onkeyup="getValue(event)"><br>'; } }); function getValue(event) { console.log(`Key was pressed for the new created input: ${event.key}`); if (event.key == 'Enter') { console.log(`The value pushed to the array is: ${event.target.value}`); multipleInput.push(event.target.value) } } .multipleInput{ margin-bottom: 1rem; margin-left: 1rem; } #singleInput{ margin-bottom: 2rem; } <input type="text" id="singleInput"> <div id="target"> </div>