Adding inputs through for loop

November 6, 2022

How do I change this code so that when I select an input it adds the text from array based on input id. I have tried to do it myself, but in for loop "i" is always equal to 2, but I want it to be 0, 1 based on which input I select. Please help, I have spent multiple hours with no success.

let basetext = [];

let text1 = document.getElementById("text")
text1.innerHTML = basetext



const thank = [`hi`,
`bye`]


for (i=0; i<thank.length; i++) {
    document.getElementById("thank"+i).addEventListener("click", function () {
            basetext[i] = thank[i]
             text1.innerHTML = basetext.join('')
        })
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <textarea id="text"></textarea>

    <div class="buttons">
      <div>
        <div>
          <input type="radio" name="thank" id="thank0" />
          <label for="thank0">first</label>
          <input type="radio" name="thank" id="thank1" />
          <label for="thank1">second</label>
        </div>
        <button>Next</button>
      </div>
    </div>
  </body>
  <script src="index.js"></script>
</html>

>Solution :

Add a data attribute to each input.
Add a class to a containing element, and then use event delegation to catch events from the child input elements when they’re fired. In the handler check to see if the child element that fired the event is a radio input, and then use the data attribute to grab the element from the thank array, and update the textarea content with it.

// Cache the elements
const text = document.querySelector('#text');
const group = document.querySelector('.inputGroup');

// Add one listener to the input group element
group.addEventListener('change', handleChange);

const thank = [`hi`, `bye`];

// Check that clicked input is a radio button,
// grab the id from its dataset, and then use
// that id to add the element from the array to
// the content of the text area
function handleChange(e) {
  if (e.target.matches('[type="radio"]')) {
    const { id } = e.target.dataset;
    text.defaultValue = thank[id];
  }
}

<textarea id="text"></textarea>
<div class="buttons">
  <div>
    <div class="inputGroup">
      <label for="0">first
        <input
          type="radio"
          name="thank"
          data-id="0"
          id="thank0"
        />
      </label>
      <label for="thank1">second
        <input
          type="radio"
          name="thank"
          data-id="1"
          id="thank1"
        />
      </label>
    </div>
    <button>Next</button>
  </div>
</div>