下面是路径名(src / assets / js / custom.js)中的代码
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add('right-panel-active');
});
signInButton.addEventListener('click', () => {
container.classList.remove('right-panel-active');
});
HTML
<!-- main section -->
<div class="container container text-center" id="container">
<div class="form-container sign-up-container">
<!-- Sign Up form code goes here -->
<form action="#">
<h1 class="text-center">Create Account</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
</div>
<span>or use your email for registration</span>
<input type="text" class="form-control custInp" placeholder="Name" />
<input type="email" class="form-control custInp" placeholder="Email" />
<input type="password" class="pse" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<!-- Sign In form code goes here -->
<form action="#">
<h1>Sign in</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>or use your account</span>
<input type="email" class="form-control custInp" placeholder="Email" />
<input type="password" class="form-control custInp" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<!-- The overlay code goes here -->
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>
To keep connected with us please login with your personal info
</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<!-- main section -->
当我使用此代码而不使用角度时,它工作正常。但是在角度我得到错误:未捕获的TypeError:无法读取null的属性'addEventListener'
请让我知道我做错了什么以及如何解决?
以下是路径名(src / assets / js / custom.js)中的代码const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document ....
而不是手动操作DOM,而是使用Angular提供的功能。让它处理事件,处理类等。在TS中需要做的就是声明一个指示面板是否处于活动状态的属性
您在这里进行此更改,它将按您的要求工作添加ngclass来检查条件,并使用toggleClass()