Display results of onkeyup event on multiple id

Question

I am trying to get the text in a multiple text box as the user types in it (jsfiddle playground):

function Input1(a) {
  document.getElementById("Input11").innerHTML = a.value;
  document.getElementById("Input12").innerHTML = a.value;
  document.getElementById("Input13").innerHTML = a.value;
}
function Input2(b) {
  document.getElementById("Input21").innerHTML = b.value;
  document.getElementById("Input22").innerHTML = b.value;
  document.getElementById("Input23").innerHTML = b.value;
}

And Result as

<span id="text-box">
 <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input1(this);">
  </span><br><br>
  <span id="Input11">Input11</span><br>
  <span id="Input12">Input12</span><br>
  <span id="Input13">Input13</span><br><br>
<span id="text-box">
  <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input2(this);">
</span><br><br>
<span id="Input21">Input21</span><br>
<span id="Input22">Input22</span><br>
<span id="Input23">Input23</span><br><br>

The above code is working fine.

But I want to Display each "onkeyup" input multiple times on-page. So here I need to update the function and span id (As if I use the same id then it will not display anything after 2nd call)

Please help me to reformat the above JavaScript and HTML so Just Define function for input and display it on all HTML span id without changing span id each time...

you can use class instead of id and use querySelectorAll to select all elements here is code https://jsfiddle.net/2kac3t9m/ — shubham jha, Oct 15 '21 at 04:01

Mister Jojo · Answer 1 · 2021-10-15T04:12:36.403

you can do somthing like that:

document.querySelectorAll('div.text-box').forEach( (box,i) => 
  {
  let 
    intxt  = box.querySelector('input')
  , spTxts = box.querySelectorAll('span')
    ;
  intxt.mane        = `Jname${++i}`
  intxt.placeholder = `Input${i}`
  intxt.onkeyup = () => spTxts.forEach(sp=>sp.textContent = intxt.value)
  })

.text-box {
  margin  : 20px 0 15px 0; 
}
.text-box input {
  width         : 100%;
  font-size     : 13px;
  padding       : 5px;
  margin-top    : -5px;
  margin-bottom : 1em;
  box-shadow    : 1px 5px 7px #75757578;
}
.text-box span {
  display       : block;
}

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

<div class="text-box">
  <input type="text">
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

Thank You sir but when I'm collecting all inputs and displaying it in different parts of the the same webpage only first output is displaying.. for detailed information Im working on https://github.com/bsahane/live — Bhushan Balasaheb Sahane, Oct 15 '21 at 05:32

score 1 · Accepted Answer · answered Oct 15 '21 at 04:08

you can use class instead of id and use querySelectorAll to select all elements here is sample code

function Input1(a) {
      const elements = document.querySelectorAll(".Input1");
      elements.forEach((e)=>{
        e.innerHTML = a.value;
      })
      
    }
 function Input2(b) {
      const elements = document.querySelectorAll(".Input2");
       elements.forEach((e)=>{
        e.innerHTML = b.value;
      })
    }

    <html>
    <body><span id="text-box">
        <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input1(this);">
      </span><br><br>
      <span class="Input1">Input11</span><br>
      <span class="Input1">Input12</span><br>
      <span class="Input1">Input13</span><br><br>
    <span id="text-box">
      <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input2(this);">
    </span><br><br>
    <span class="Input2">Input21</span><br>
    <span class="Input2">Input22</span><br>
    <span class="Input2">Input23</span><br><br>
    </body>
 </html>

score 1 · Answer 3 · answered Oct 15 '21 at 04:20

this is the best for you!

function Input(a, n) {
  var spans = document.querySelectorAll('#tb' + n + ' span')
  spans.forEach(function(span){
    span.innerHTML = a.value;
  })
}

.textbox-value {
  width: 100%;
  font-size: 13px;
  padding: 5px;
  margin-top: -5px;
  box-shadow: 1px 5px 7px #75757578;
}

<html>

<body>
  <div id="tb1" class="text-box">
    <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input(this, '1');" />
    <br><br>
    <span>Input11</span><br>
    <span>Input12</span><br>
    <span>Input13</span><br>
  </div>
  <br>
  <div id="tb2" class="text-box">
    <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input(this, '2');">
    <br><br>
    <span>Input21</span><br>
    <span>Input22</span><br>
    <span>Input23</span><br>
  </div>
  <br>
</body>

</html>

Thank You Sir for your solution but I'm collecting all inputs at a time and displaying them all on different locations of the page as per requirements. like https://jsfiddle.net/bsahane/e69L2m01/7/ So can you please provide update on same.. — Bhushan Balasaheb Sahane, Oct 15 '21 at 05:29

Display results of onkeyup event on multiple id

3 Answers3

Linked