Как добавлять только одно значение?

Question

Есть инпут и радио батон при первом добавлены добавляет значение, а при втором добавляет новое и предыдущее. Я так понимаю моим методом не получиться реализовать, чтобы при каждом новом добавлены, добавлялось только новое значение. Может кто-то подсказать как реализовать правильно?

 const valueInput = document.querySelector("#buyProducts"),
  textArea = document.querySelector("#textArea"),
  inp = document.querySelectorAll('input[type="radio"]'),
    addBtn = document.querySelector(".btn-add");

inp.forEach((item) =>
  item.addEventListener("click", () => {
    addBtn.addEventListener("click", () => {
      textArea.textContent += `${item.value}: ${valueInput.value} psc`;
    });
  })
);

                <input type="text" id="buyProducts" placeholder="Enter the quantity of goods...">

<div class="radio-group">
                        <input type="radio" name="products" value="Beer" id="test1"> <label
                            for="test1">Beer</label>
                        <input type="radio" name="products" value="Pepsi" id="test2"> <label for="test2">Pepsi</label>
                        <input type="radio" name="products" value="Chips" id="test3"> <label for="test3">Chips</label>
                    </div>
                    <div class="btn-add">Add</div>
                                    <textarea name="textareaBasket" id="textArea" cols="30" rows="10" disabled></textarea>

Answer 1

В принципе все почти идеально... но...

const valueInput = document.querySelector("#buyProducts"),
  textArea = document.querySelector("#textArea"),
  inp = document.querySelectorAll('input[type="radio"]'),
    addBtn = document.querySelector(".btn-add");
let itvalue = "default";
inp.forEach((item) =>
  item.addEventListener("click", () => {
    itvalue = item.value;
  })
);
addBtn.addEventListener("click", () => {
    textArea.textContent += `${itvalue}: ${valueInput.value} psc\n`;
});

<input type="text" id="buyProducts" placeholder="Enter the quantity of goods...">

<div class="radio-group">
                        <input type="radio" name="products" value="Beer" id="test1"> <label
                            for="test1">Beer</label>
                        <input type="radio" name="products" value="Pepsi" id="test2"> <label for="test2">Pepsi</label>
                        <input type="radio" name="products" value="Chips" id="test3"> <label for="test3">Chips</label>
                    </div>
                    <div class="btn-add">Add</div>
                                    <textarea name="textareaBasket" id="textArea" cols="30" rows="10" disabled></textarea>

Исправил:

Поставил чтобы кнопка имела только 1го слушателя
Сделал логику сохранения значения при выборе елемента из radio групы
Добавил "\n" чтобы в textarea добавлялось с каждой новой строки

Answer 2

Немного поправил код. Вы зачемсто в цикле много раз добавляете слушатель клика на кнопку, когда достаточно только один раз.

 const valueInput = document.querySelector("#buyProducts"),
    busket = document.querySelector("#busket"),
    addBtn = document.querySelector(".btn-add");
    
addBtn.addEventListener("click", () => {
  const item = document.querySelector('input[type="radio"]:checked');
  const p = document.createElement('p');
  p.innerHTML = `${item.value}: ${valueInput.value} psc`
  busket.append(p);
});

<input type="number" id="buyProducts" placeholder="Enter the quantity of goods...">

<div class="radio-group">
  <input type="radio" name="products" value="Beer" id="test1">
  <label for="test1">Beer</label>
  <input type="radio" name="products" value="Pepsi" id="test2">
  <label for="test2">Pepsi</label>
  <input type="radio" name="products" value="Chips" id="test3">
  <label for="test3">Chips</label>
</div>

<div class="btn-add">Add</div>
<div id="busket"></div>

БЛОГ НА HUSL

Как добавлять только одно значение?

Ответы (2 шт):