У меня проблемы с моим проектом на javascript. Я хочу сделать тег ввода
Это должен быть тег после нажатия запятой, но он не работает. Кто-нибудь может помочь мне решить эту проблему?
Вот код javascript и html. Я пробовал этот код в другом проекте, и он работал, но не для этого проекта. Репозиторий прав. Интересно, какая у меня проблема?
[].forEach.call(document.getElementsByClassName('tags-input'), function(el){
let hiddenInput = document.getElementsById('hdn'),
mainInput = document.getElementsById('inp');
tags = [];
mainInput.addEventListener('input', function(){
let enteredTags = mainInput.value.split(',');
if (enteredTags.length > 1){
enteredTags.forEach(function(t){
let filteredTag = filterTag(t);
if (filteredTag.length > 0)
addTag(filteredTag);
});
mainInput.value = '';
}
});
el.appendChild(mainInput);
el.appendChild(hiddenInput);
addTag('hello');
function addTag (text){
let tag = {
text: text,
element: document.createElement('span'),
};
tag.element.classList.add('tag');
tag.element.textContent = tag.text;
let closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.addEventListener('click', function(){
removeTag(tags.indexOf(tag));
});
tag.element.appendChild(closeBtn);
tags.push(tag);
el.insertBefore(tag.element, mainInput);
refreshTags();
}
function removeTag (index){
let tag = tags[index];
tags.splice(index,1);
el.removeChild(tag.element);
refreshTags();
}
function refreshTags (){
}
function filterTag (tag){
return tag.replace(/[^\w -]/g, '').trim().replace(/\W+/g, '-');
}
});
@push('style')
<link href="{{asset('/css/tag.css')}}" rel="stylesheet" type="text/css">
@endpush
@push('script')
<script type="text/javascript" src="{{asset('/js/tag.js')}}"></script>
@endpush
...
<div class="field">
<label>Tag</label>
<div class="tags-input" >
<input class="main-input" type="text" id="inp" name="tag2" placeholder="Contoh: akreditasi, banding, TUK mandiri">
<input type="hidden" name="tags-input" id="hdn" >
</div>
<span class="help-block">Gunakan tanda koma sebagai pemisah</span>
...