每当我点击div时，它都会给我一个错误"Uncaught ReferenceError:sel未在HTMLDivElement.onclick中定义">我目前正在处理angular 8。它给了我这个错误。我看到了一些相同的错误相关的帖子，但没有人真正解决我的问题
如有任何帮助，我们将不胜感激。谢谢！
我的HTML代码
<div id="container">
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
</div>
我的TS代码
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'samarsolprac';
constructor() { }
sel(id) {
var divs = document.getElementById('container').getElementsByTagName('div');
for(var i=0;i<divs.length; i++) {
if(divs[i]!=id) {
divs[i].className='items';
}
}
id.className= 'selitem';
}
ngOnInit() {
}
}
我的CSS代码
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'samarsolprac';
constructor() { }
sel(id) {
var divs = document.getElementById('container').getElementsByTagName('div');
for(var i=0;i<divs.length; i++) {
if(divs[i]!=id) {
divs[i].className='items';
}
}
id.className= 'selitem';
}
ngOnInit() {
}
}.items
{
display:block;
width:200px;
background-color:white;
color:black;
cursor:pointer;
margin-bottom:5px;
}
.items:hover
{
background-color:blue;
color:white;
}
/* css for selected div*/
.selitem
{
display:block;
width:200px;
background-color:red;
color:yellow;
cursor:pointer;
margin-bottom:5px;
}<div id="container">
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
</div>.items
{
display:block;
width:200px;
background-color:white;
color:black;
cursor:pointer;
margin-bottom:5px;
}
.items:hover
{
background-color:blue;
color:white;
}
/* css for selected div*/
.selitem
{
display:block;
width:200px;
background-color:red;
color:yellow;
cursor:pointer;
margin-bottom:5px;
}
<div id="container">
<div class="items" (click)="sel(this)">one</div>
...
</div>
在这种情况下，这是指组件本身
所以你可以这样做：
打字脚本：
public sel(event): void {
const divs = document.getElementById('container').getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
if (divs[i] !== event.target) {
divs[i].className = 'items';
}
}
event.target.className = 'selitem';
}
html:
<div id="container">
<div class="items" (click)="sel($event)">one</div>
<div class="items" (click)="sel($event)">one</div>
<div class="items" (click)="sel($event)">one</div>
<div class="items" (click)="sel($event)">one</div>
<div class="items" (click)="sel($event)">one</div>
<div class="items" (click)="sel($event)">one</div>
<div class="items" (click)="sel($event)">one</div>
</div>
使用(click)而不是onclick，如下
<div id="container">
<div class="items" (click)="sel(this)">one</div>
...
</div>