Reusable function to display input text in div-CodePudding

I have a function that displays text in a div as its typed into an input. Right now it simply checks for each ID go get the value and display the text.

I want to make this function reusable so that I can match different inputs with different divs without writing a unique function for each case.

Here is an example that works using a single input and 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>

And I want to be able to repeat this for different sets of unique inputs & divs with a reusable function.

<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>

CodePudding user response：

If you wrap each "set" in a container, and swap your ids for classes, you can can add listeners to each input to watch for changes, find the parent container, find the display box and update its text content.

// 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>

CodePudding user response：

It seems you would need to get the ID of each input box and each output box?

function showTypedInput(inputID, outputID) {
    var inputBox = document.getElementById(inputID);
    var outputBox = document.getElementById(outputID);
    inputBox.onkeyup = function(){
        outputBox.innerHTML = inputBox.value;
    };
}

Then you just reuse this? showTypedInput("myInputBox", "myOutputBox");

CodePudding user response：

You can create this functionality using following:

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();

In html just use

  <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,output