I have this button in HTML:
<div id="login">
<img src="/resource/image_header/login.png" alt="Login">
<div class="cd-main-nav js-main-nav">
<button id="welcome-text" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title=""></button>
<ul id="login-signup" class="cd-main-nav__list js-signin-modal-trigger">
<li><a id="logInButton" class="cd-main-nav__item js-signin-modal-trigger cd-main-nav__item--signin" data-type="login" data-signin="login">Đăng nhập</a></li>
</ul>
</div>
</div>
and a pop-up modal for login form:
<div id="login-popup" class="cd-signin-modal js-signin-modal">
<div class="cd-signin-modal__container">
<ul class="cd-signin-modal__switcher js-signin-modal-switcher js-signin-modal-trigger">
<li><a data-signin="login" data-type="login" style="font-weight: bold;">Đăng nhập</a></li>
</ul>
<div class="cd-signin-modal__block js-signin-modal-block" data-type="login">
<!-- log in form -->
<form id="loginForm" class="cd-signin-modal__form">
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signin-email">Tên đăng nhập</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signin-email" type="text" placeholder="Tên đăng nhập">
<span class="cd-signin-modal__error">Bạn chưa nhập tên đăng nhập!</span>
</p>
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signin-password">Mật khẩu</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signin-password" type="password" placeholder="Mật khẩu">
<span class="cd-signin-modal__error">Bạn chưa nhập mật khẩu!</span>
</p>
<p class="cd-signin-modal__fieldset">
<input type="checkbox" id="remember-me" checked class="cd-signin-modal__input ">
<label for="remember-me">Ghi nhớ</label>
</p>
<p class="cd-signin-modal__fieldset">
<input id="loginButton" class="cd-signin-modal__input cd-signin-modal__input--full-width" type="submit" value="Đăng nhập">
</p>
</form>
<p class="cd-signin-modal__bottom-message js-signin-modal-trigger">Bạn chưa có tài khoản?<a id="signupButton" href="javascript:void(0)">Đăng ký ngay</a></p>
</div> <!-- cd-signin-modal__block -->
</div>
</div>
This is javascript to open the form when clicking the button id=”logInButton”:
function ModalSignin(element) {
this.element = element;
this.blocks = this.element.getElementsByClassName('js-signin-modal-block');
this.switchers = this.element.getElementsByClassName('js-signin-modal-switcher')[0].getElementsByTagName('a');
this.triggers = document.getElementsByClassName('js-signin-modal-trigger');
this.hidePassword = this.element.getElementsByClassName('js-hide-password');
this.init();
};
ModalSignin.prototype.init = function () {
var self = this;
//open modal/switch form
for (var i = 0; i < this.triggers.length; i++) {
(function (i) {
self.triggers[i].addEventListener('click', function (event) {
if (event.target.hasAttribute('data-signin')) {
event.preventDefault();
self.showSigninForm(event.target.getAttribute('data-signin'));
}
});
})(i);
}
}
I tried to debug by console.log("Clicked!")
when clicking the button but the event did not happen. Is the button blocked somewhere?