Adding inputs through for loop

Question

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>

Andy · Accepted Answer · 2022-11-06 19:23:52Z

1

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>

answered Nov 6, 2022 at 19:23

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edvard Over a year ago

Thank you for helping. I will try to understand the code you wrote, some parts are new to me, though.

Collectives™ on Stack Overflow

Adding inputs through for loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related