Populate next empty text input based on a button click-CodePudding

I have a simple set of buttons that may be clicked in any order. When clicked the button should fill the next available text box.

So far I have only been able to make the button click populate the text box that is in focus. This only really fulfils half of my task.

At the moment I am only looking for vanilla JS solutions rather than JQuery if possible.

<body>

    <div >

        
        <button  id="txt1" onclick="addText('txt1')">txt1</button>
        <button  id="txt2" onclick="addText('txt2')">txt2</button>
        <button  id="txt3" onclick="addText('txt3')">txt3</button>
        <button  id="txt3" onclick="addText('txt3')">txt3</button>
        <button  id="txt4" onclick="addText('txt4')">txt4</button>
        <button  id="txt5" onclick="addText('txt5')">txt5</button>
       
    </div>

    <div >
          <input type="text"  id="box1" placeholder="WPT 1" onfocus="field=this;" autofocus>
          <input type="text"  id="box2" placeholder="WPT 2" onfocus="field=this;">  
          <input type="text"  id="box3" placeholder="WPT 3" onfocus="field=this;">  
          <input type="text"  id="box4" placeholder="WPT 4" onfocus="field=this;">  
          <input type="text"  id="box5" placeholder="WPT 5" onfocus="field=this;">  


  

    <script>

      var field = 0;
      function addText(txt){
        if(field === 0) return false;
        field.value = txt;
      }
  </script>
<body>

CodePudding user response：

You can add a paramater to your function to update exact text box like this:

function addText(txt, fieldNumber) {
  var elems = document.getElementsByClassName("inputs");
  if (elems.length <= fieldNumber) return;
  elems[fieldNumber].value = txt;
}

and then call it like "addText('text', 3)"

Check this sandbox https://codesandbox.io/s/laughing-einstein-byhf0f?file=/src/index.js:299-472

If by "next available", you meant a field which doesn't already have a value then edit your function like this:

function addText(txt) {
  var elems = document.getElementsByClassName("inputs");
  console.log("111");
  console.log(elems);
  for (let i = 0; i < elems.length; i  ) {
    if (elems[i] && !elems[i].value) {
      elems[i].value = txt;
      break;
    }
  }
}

For a demo check this sandbox: https://codesandbox.io/s/trusting-browser-lckvy0?file=/index.html

CodePudding user response：

The key was obtaining the element that fired the event using window.target.event.

This is a demo showing the concept:

function addText(txt){
  //this is the clicked button (that fired the event)
  buttonClicked = window.event.target;    
  
  //extracting the number portion from its id with regex
  const myregexp = /txt(?<id>\d )/im;
  const match = myregexp.exec(buttonClicked.id);
  
  //selecting the target element as having the id = box   id number from button
  const targetID = 'box'   match.groups['id'];  
  const target = document.querySelector(`#${targetID}`);
  
  //changing its value
  target.value = txt;
}

.textBoxes > input{
  display:  block;
  margin-bottom: 1rem;
}

<body>
<div >
  <button  id="txt1" onclick="addText('txt1')">txt1</button>
  <button  id="txt2" onclick="addText('txt2')">txt2</button>
  <button  id="txt3" onclick="addText('txt3')">txt3</button>  
  <button  id="txt4" onclick="addText('txt4')">txt4</button>
  <button  id="txt5" onclick="addText('txt5')">txt5</button>
</div>

<br>

<div >
  <input type="text"  id="box1" placeholder="WPT 1">
  <input type="text"  id="box2" placeholder="WPT 2">  
  <input type="text"  id="box3" placeholder="WPT 3">  
  <input type="text"  id="box4" placeholder="WPT 4">  
  <input type="text"  id="box5" placeholder="WPT 5">  
</div>