Tengo una función que muestra texto en un div como se escribe en una entrada. En este momento, simplemente verifica cada ID, obtiene el valor y muestra el texto.
Quiero hacer que esta función sea reutilizable para poder hacer coincidir diferentes entradas con diferentes divs sin escribir una función única para cada caso.
Aquí hay un ejemplo que funciona usando una sola entrada y div:
<body> <input type='text' name='name' id='inputBox'> <div id='displayBox'></div> <script type="text/javascript"> var displayText = document.getElementById('inputBox'); displayText.onkeyup = function() { document.getElementById('displayBox').innerHTML = inputBox.value; } </script> </body>Y quiero poder repetir esto para diferentes conjuntos de entradas y divs únicos con una función reutilizable.
<body> <!-- First set --> <input type='text' name='name' id='inputBox'> <div id='displayBox'></div> <!-- Second set --> <input type='text' name='name' id='inputBox'> <div id='displayBox'></div> <!-- etc... --> <script type="text/javascript"> var displayText = document.getElementById('inputBox'); displayText.onkeyup = function() { document.getElementById('displayBox').innerHTML = inputBox.value; } </script> </body>Si envuelve cada "conjunto" en un contenedor e intercambia sus ID por clases, puede agregar oyentes a cada entrada para observar los cambios, encontrar el contenedor principal, encontrar el cuadro de visualización y actualizar su contenido de texto.
// Get all of the inputs const displayText = document.querySelectorAll('.inputBox'); // Attach listeners to all of them displayText.forEach(input => { input.addEventListener('keyup', handleChange, false); }); function handleChange() { // Find the closest div ancestor element (the container) const parent = this.closest('div'); // Then locate the display box and update the text content parent.querySelector('.displaybox').textContent = this.value; } .container { margin-bottom: 1em; } .displaybox { margin-top: 0.2em; height: 1.3em; width: 300px; border: 1px solid black; } <div class="container"> <input type="text" name="name" class="inputBox" placeholder="Type here"> <div class="displaybox"></div> </div> <div class="container"> <input type="text" name="age" class="inputBox" placeholder="Type here"> <div class="displaybox"></div> </div> <div class="container"> <input type="text" name="location" class="inputBox" placeholder="Type here"> <div class="displaybox"></div> </div>Parece que necesitaría obtener la ID de cada cuadro de entrada y cada cuadro de salida.
function showTypedInput(inputID, outputID) { var inputBox = document.getElementById(inputID); var outputBox = document.getElementById(outputID); inputBox.onkeyup = function(){ outputBox.innerHTML = inputBox.value; }; } ¿Entonces solo reutilizas esto? showTypedInput("myInputBox", "myOutputBox");
Puede crear esta funcionalidad usando lo siguiente:
function listener(target){ return function(e){target.innerHTML = e.target.value}; } function init(){ var elems = document.querySelectorAll("input[data-keyuptarget]"); for(var elem of elems){ var target = document.getElementById(elem.getAttribute('data-keyuptarget')); if (target) elem.onkeyup = listener(target); } } init();En html solo usa
<input type='text' name='name' data-keyuptarget="displayBox1"> <div id='displayBox1'></div> <input type='text' name='name' data-keyuptarget="displayBox2"> <div id='displayBox2'></div>JS Bin: https://jsbin.com/piwiyapohe/edit?html , salida