Dynamically rendered tagin-tag can't get value

[yyc13236]

Hi, thank you for this great work, it all worked fine and smooth.
But I was trying to dynamically create tagin-tag with js, afterward, I want to retrieve the value out of the input element, but the value is null.
But once I manually add some tags In the input field, I can get the input value afterward.
Is there any suggestion or ways I can look up to?

dynacmically render.js

tagArr.forEach((el) => { const tagEl = document.createElement("span"); tagEl.setAttribute("class", "tagin-tag"); tagEl.innerHTML =${el}; document.querySelector(".tagin-wrapper").appendChild(tagEl); });

getting value out of it, but it show null.

const tag = document.querySelector("#tag").value;

Thanks!

[erwinheldy]

Hi,
You can update the value directly to the input element, then dispatch a change event, tagin will automatically updated according to the element value.

example:

<input type="text" id="example" class="form-control tagin">
<button id="updateValue" type="button" class="btn btn-primary mt-2">Update value</button>

document.querySelector('#updateValue').addEventListener('click', () => {
  const target = document.querySelector('#example')
  target.value = 'red,green,blue'
  target.dispatchEvent(new Event('change'))
  alert(target.value)
})