Входной тег, почему мой javascript код не работает? - PullRequest
0 голосов
/ 19 февраля 2020

У меня проблемы с моим проектом на javascript. Я хочу сделать тег ввода

image

Это должен быть тег после нажатия запятой, но он не работает. Кто-нибудь может помочь мне решить эту проблему?

Вот код 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>

...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...