Как связать input и button?

Question

[Vladislav]

Всех приветствую, есть кнопка - таб, на ней должен быть input, но при клике на input всплытие от кнопки не происходит, как связать input с кнопкой?
вот js табов

(function() {
    let tabMenus = document.querySelectorAll('.js-item-link');
    let tabContents = document.querySelectorAll('.tab_content');
     
 
    for (var i = 0; i < tabMenus.length; i++) {
 
        tabMenus[i].addEventListener('click', function(e) {
     
             e.preventDefault();
    
             for (var i = 0; i < tabMenus.length; i++) {
                 tabMenus[i].className = 'js-item-link';
             }
 
             this.className = 'js-item-link is-active';
             
         
             for (var i = 0; i < tabContents.length; i++) {
                tabContents[i].className = 'tab_content';
             }
             
             document.getElementById(this.dataset.id).className = 'tab_content is-active';
 
         });
     }
}());

разметка

<div class="modal-buy-card__tab-menu">
                                        <button type="button" data-id="about" class="js-item-link is-active">
                                            <span>Дата</span>
                                        </button>
                                        <button type="button" data-id="works" class="js-item-link">
                                            <span>Время</span>
                                            <span>13:00 (МСК)</span>
                                        </button>
                                    </div>
                                    <div class="modal-buy-card__tab-container">
                                        <div class="tab_content is-active" id="about">
                                            <input class="modal-buy-card__date-calendar flatpickr flatpickr-input active" type="text" readonly="readonly">
                                            <div>
                                                <button>отмена</button>
                                                <button>OK</button>
                                            </div>
                                        </div>
                                        <div class="tab_content" id="works">
                                           <p>Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works WorWorks Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works</p>
                                        </div>
                                    </div>

сам input плагин календаря flatpickr, но в разметке он тоже есть, пожалуйста подскажите решение на чистом JavaScript

Answer 1

[Daniel SERG]

маленько не понял вопроса но это может и есть решение ?_?

поменял:

<button>OK</button> на <button onclick="obr()">OK</button>

из самовызывающей функции переписал на обычную (function() {code}()) на function obr(){}

на крайний случай если не понятно что поменял):
{code}

<button type="button" data-id="about" class="js-item-link is-active">
                                            <span>Дата</span>
                                        </button>
                                        <button type="button" data-id="works" class="js-item-link">
                                            <span>Время</span>
                                            <span>13:00 (МСК)</span>
                                        </button>
                                    </div>
                                    <div class="modal-buy-card__tab-container">
                                        <div class="tab_content is-active" id="about">
                                            <input class="modal-buy-card__date-calendar flatpickr flatpickr-input active" type="text" readonly="readonly">
                                            <div>
                                                <button>отмена</button>
                                                <button onclick="obr()">OK</button>
                                            </div>
                                        </div>
                                        <div class="tab_content" id="works">
                                           <p>Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works WorWorks Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works</p>
                                        </div>
                                    </div>
                                    <script type="text/javascript">
                                        function obr(){
                                            alert("проверка кнопки!_!")
    let tabMenus = document.querySelectorAll('.js-item-link');
    let tabContents = document.querySelectorAll('.tab_content');
     
 
    for (var i = 0; i < tabMenus.length; i++) {
 
        tabMenus[i].addEventListener('click', function(e) {
     
             e.preventDefault();
    
             for (var i = 0; i < tabMenus.length; i++) {
                 tabMenus[i].className = 'js-item-link';
             }
 
             this.className = 'js-item-link is-active';
             
         
             for (var i = 0; i < tabContents.length; i++) {
                tabContents[i].className = 'tab_content';
             }
             
             document.getElementById(this.dataset.id).className = 'tab_content is-active';
 
         });
     }
};
                                    </script>

Comments

[Vladislav]

Daniel SERG не совсем, надо привязать к

<button type="button" data-id="about" class="js-item-link is-active">
                                            <span>Дата</span>
                                        </button>

, а не к ОК, и разметку можно как-то не менять?

[Daniel SERG]

Vladislav, просто добавь новый атрибут к тегу onclick="obr()"

<button onclick="obr()" type="button" data-id="about" class="js-item-link is-active">
                                            <span>Дата</span>
                                        </button>

и разметку можно как-то не менять?

не понимаю смысла вопроса(где поменять разметку)

[Vladislav]

Daniel SERG вот тот самый инпут и кнопка

[Vladislav]

Daniel SERG, а инпуту ничего не надо прописывать в самом тэге? не сробит клик по инпуту

[Daniel SERG]

попробуй так
<span onclick="obr()">Дата</span>
если не получиться тогда я не знаю как ещё можно
может тебе кто другой ответит)

[Vladislav]

Daniel SERG, я просто повесил onclick="obr()" на сам инпут, спасибо)

[Daniel SERG]

так что ли

<input onclick="obr()" class="modal-buy-card__date-calendar flatpickr flatpickr-input active" type="text" readonly="readonly">

[Daniel SERG]

рад был помочь)

[Vladislav]

Daniel SERG, ты есть в телеге, таб стал другой не рабоать, обсудить бы там, чтобы тут не засорять, на вопрос то ты ответил) скинь логин пожалуйста свой?

[Daniel SERG]

Vladislav, если смогу помочь то помогу)
я есть в вк или в дискорде)