Uncaught :无法读取空角的属性'addEventListener‘
Uncaught :无法读取空角的属性'addEventListener‘
提问于 2020-01-28 08:09:49
在角addEventListener中，为空
下面是pathname(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');
});<!-- 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 -->当我使用这段没有的代码时，角的使用效果很好。
但是在角度上，我得到了错误：
Uncaught TypeError: Cannot read property 'addEventListener' of null
请让我知道我做错了什么，如何解决它？
回答 2
Stack Overflow用户
发布于 2020-01-28 08:20:57
而不是手动操作DOM，使用什么角必须提供。让它处理事件、句柄类等。在TS中所需要做的就是声明一个属性，指示面板是否是活动的。
isRightPanelActive: boolean;在模板中
<div class="container text-center" [class.right-panel-active]="isRightPanelActive">
<!-- ... -->
<button class="ghost" id="signUp" (click)="isRightPanelActive = true">Sign Up</button>
<!-- ... -->
<button class="ghost" id="signIn" (click)="isRightPanelActive = false">Sign In</button>Stack Overflow用户
发布于 2020-01-28 09:24:33
在这里，您将进行这些更改，它将在您需要添加ngclass以检查条件和函数toggleClass()时工作。
test.component.html文件
<div class="container" id="container" [ngClass]="{'right-panel-active':activeClass}">
<div class="form-container sign-up-container">
<form action="#">
<h1>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>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<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" placeholder="Email" />
<input type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<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" (click)="toggleClass()" >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" (click)="toggleClass()" >Sign Up</button>
</div>
</div>
</div>
</div>test.component.ts文件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-double',
templateUrl: './double.component.html',
styleUrls: ['./double.component.css']
})
export class DoubleComponent implements OnInit {
constructor() { }
activeClass=false;
ngOnInit() {
}
toggleClass(){
this.activeClass=!this.activeClass
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59944482
复制相关文章
相似问题
腾讯云开发者
