У скрытого inputa не обновляется value

Question

Синим выделен первый тег, который вписан вручную в HTML разметку. Последующий также вписан вручную, а остальные добавляются с помощью input и JS.

После каждого добавления нового тега выполняется функция updateHiddenTags(), которая должна обновлять value скрытого input, но этого не происходит. Что я делаю не так?

const tagInput = document.querySelector('.tag_input');
const tagContainer = document.querySelector('.tag_container');
const hiddenTags = document.querySelector('.tag_input-hidden');
const existingTags = "<?= isset($task['tags']) ? $task['tags'] : '' ?>"
const tagWrapper = document.querySelector('.todo-tasks__tags-wrapper');
const tags = document.querySelector('.tags');

function createTag(text) {
  const tag = document.createElement('div');
  tag.classList.add('todo-tasks__tags-tag-wrapper', 'tag_container');
  const tagText = document.createElement('div');
  tagText.classList.add('todo-tasks__tags-tag');
  tagText.textContent = text;
  const closeButton = document.createElement('button');
  closeButton.classList.add('todo-tasks__tags-tag-button');
  closeButton.setAttribute('type', 'button');
  closeButton.innerText = 'X';

  tag.appendChild(tagText);
  tag.appendChild(closeButton);

  return tag;
}

function updateHiddenTags() {
  const tags = tagContainer.querySelectorAll('.todo-tasks__tags-tag');
  const tagText = Array.from(tags).map(tag => tag.textContent);
  hiddenTags.value = tagText.join(', ');
}

tagInput.addEventListener('input', (e) => {
  if (e.target.value.includes(',')) {
    const tagText = e.target.value.slice(0, -1).trim();
    if (tagText.length > 1) {
      const tag = createTag(tagText);
      tags.appendChild(tag);
      updateHiddenTags();
    }
    e.target.value = '';
  }
});

tagInput.addEventListener('keydown', (e) => {
  if (e.keyCode == 13) {
    if (e.target.value.includes(',')) {
      const tagText = e.target.value.slice(0, -1).trim();
    }
    const tagText = e.target.value.trim();
    if (tagText.length > 1) {
      const tag = createTag(tagText);
      tags.appendChild(tag);
      updateHiddenTags();
    }
    e.target.value = '';
  }
});

tags.addEventListener('click', (e) => {
  e.target.closest('.tag_container').remove();
  updateHiddenTags();
})

tagInput.addEventListener('keydown', (e) => {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
})

.todo-tasks__wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  padding: 100px;
  border-radius: 5px;
  align-items: center;
}

.todo-tasks__row {
  display: flex;
  gap: 50px;
}

.todo-tasks__col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.todo-tasks__input {
  padding: 10px;
  border-radius: 5px;
}

.todo-tasks__input-select {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  width: 197px;
}

.todo-tasks__row-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo-tasks__finish-date {
  width: 195px;
}

.todo-tasks__tags-wrapper {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  max-width: 195px;
}

.todo-tasks__tags-tag-wrapper {
  display: flex;
}

.todo-tasks__tags-input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #000;
  margin-top: 10px;
  max-width: 175px;
}

.todo-tasks__tags-tag {
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  max-width: max-content;
  flex-wrap: wrap;
}

.todo-tasks__tags-tag-button {
  background-color: #000;
  color: #fff;
  padding: 5px;
  padding-right: 6px;
  border-radius: 5px;
}

.todo-tasks__tags-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

<div class="todo-tasks__col">
  <label class="todo-tasks__label">Теги</label>
  <div class="todo-tasks__tags-wrapper">
    <div class="todo-tasks__tags-row tags">
      <?php
        $tagNames = array_map(function ($tag) {
            return $tag['name'];
        }, $toDoTags);

        foreach ($tagNames as $tagName):
      ?>
      <div class="todo-tasks__tags-tag-wrapper tag_container">
        <div class="todo-tasks__tags-tag">
          <?= $tagName ?>
        </div>
        <button class="todo-tasks__tags-tag-button" type="button">X</button>
      </div>
      <?php
        endforeach;
      ?>
    </div>
    <input type="text" class="todo-tasks__tags-input tag_input">
    <input type="text" class="tag_input-hidden" value="<?= implode(', ', $tagNames) ?>" hidden>
  </div>
</div>

БЛОГ НА HUSL

У скрытого inputa не обновляется value

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