Display results of onkeyup event on multiple id-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>