Radio button multiply on every li element-CodePudding

I try do build a to do app. And i wanna add a radio button for each li element that i create. But my problem is that every time i create a new li element with enter the radio button multiply. I wanna just one button for each li element thats created. Can anyone help me please .

// Select the input field
const inputField = document.querySelector('#input-field');

// Add an event listener to the input field that listens for the keydown event
inputField.addEventListener('keydown', (event) => {
  // Check if the enter key was pressed
  if (event.keyCode === 13) {
    // Get the value of the input field
    const inputFieldValue = inputField.value;

    // Create a new li element
    const liElement = document.createElement('li');

    // Set the li element's value to the value of the input field
    liElement.textContent = inputFieldValue;

    // Append the li element to an ul element
    const ulElement = document.querySelector('#list');
    ulElement.appendChild(liElement);

    // Select all the li elements
    const liElements = document.querySelectorAll('li');

    // Iterate through the li elements
    liElements.forEach((liElement) => {
      // Create a new input element
      const inputElement = document.createElement('input');

      // Set the type attribute of the input element to 'radio'
      inputElement.setAttribute('type', 'radio');

      // Set the name, value, and checked attributes of the input element
      inputElement.setAttribute('name', 'radio-group');
      inputElement.setAttribute('value', liElement.textContent);

      // Append the input element to the li element
      liElement.appendChild(inputElement);
    })}});

<div >
    <h1>To Do</h1>
    <input type="text"  id="input-field">
    <div >
    <ul id="list"></ul>
</div>

CodePudding user response：

Maybe this will helps :

// Select the input field
const inputField = document.querySelector('#input-field');

// Add an event listener to the input field that listens for the keydown event
inputField.addEventListener('keydown', (event) => {
  // Check if the enter key was pressed
  if (event.keyCode === 13) {
    // Get the value of the input field
    const inputFieldValue = inputField.value;

    // Create a new li element
    const liElement = document.createElement('li');

    // Set the li element's value to the value of the input field
    liElement.textContent = inputFieldValue;

    // Append the li element to an ul element
    const ulElement = document.querySelector('#list');
    ulElement.appendChild(liElement);

    // Select all the li elements
    const liElements = document.querySelectorAll('li');

    // Iterate through the li elements
    // liElements.forEach((liElement, index) => {
    
    // you can limit just for last item
    //  if (index == liElements.length -1) {
        // Create a new input element
        const inputElement = document.createElement('input');

        // Set the type attribute of the input element to 'radio'
        inputElement.setAttribute('type', 'radio');

        // Set the name, value, and checked attributes of the input element
        inputElement.setAttribute('name', 'radio-group');
        inputElement.setAttribute('value', liElement.textContent);

        // Append the input element to the li element
        // Use last item only
        liElements[liElements.length-1].appendChild(inputElement);
    //  }
    // })
    
    }
    
    });

<div >
    <h1>To Do</h1>
    <input type="text"  id="input-field">
    <div >
    <ul id="list"></ul>
</div>

CodePudding user response：

You can remove the 'forEach' loop as you only need to add the radio button to the newly created list item and not all of them.

  liElements.forEach((liElement) => { // remove this forEach loop

and add the radio button to the li directly

  // Append the input element to the li element
  liElement.appendChild(inputElement);

See a jsfiddle created here - https://jsfiddle.net/wq0nmkrd/