Javascript/Angular 5 - 单击多个按钮只会影响一个答案

【问题标题】：Javascript/Angular 5 - clicking multiple buttons only affects oneJavascript/Angular 5 - 单击多个按钮只会影响一个
【发布时间】：2018-03-22 15:51:54
【问题描述】：

我有一个由 4 个按钮组成的网格，一旦单击其中一个，它将调用一个名为 doSearch 的函数，该函数会检查单击了哪个按钮并根据该按钮将字符串分配给 last_search 值。

但是，当我单击四个按钮中的任何一个时，我似乎总是只按edm 按钮并将“我是 edm”读到控制台。

谁能解释这是为什么？

html

<!-- grid for music -->
<ng-container *ngIf="show" >
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="edm-btn" type="submit" (click)="doSearch($event)">EDM</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="house-btn" type="submit" (click)="doSearch($event)">House</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="pop-btn" type="submit" (click)="doSearch($event)">Pop</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="dubstep-btn" type="submit" (click)="doSearch($event)">Dubstep</button>
    </div>
  </div>
</ng-container>

功能代码

doSearch(event): void {

    if (document.getElementById('edm-btn')) {
      this.last_search = 'edm';
      console.log('i am edm');
    } else if (document.getElementById('house-btn')) {
      this.last_search = 'house';
      console.log('i am house');
    } else if (document.getElementById('pop-btn')) {
      this.last_search = 'pop';
      console.log('i am pop');
    } else if (document.getElementById('dubstep-btn')) {
      this.last_search = 'dubstep';
      console.log('i am dubstep');
    }
}

修复：

我决定将一个字符串直接传递给doSearch的函数调用，而不是传递按钮的id

html

<!-- grid for music -->
<ng-container *ngIf="show" >
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="edm-btn" type="submit" (click)="doSearch('edm')">EDM</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="house-btn" type="submit" (click)="doSearch('house')">House</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="pop-btn" type="submit" (click)="doSearch('pop')">Pop</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="dubstep-btn" type="submit" (click)="doSearch('dubstep')">Dubstep</button>
    </div>
  </div>
</ng-container>

功能

doSearch(category): void {

    console.log(JSON.stringify(category, null, 2));
    if (category === 'edm') {
      this.last_search = 'edm';
      console.log('i am edm');
    } else if (category === 'house') {
      this.last_search = 'house';
      console.log('i am house');
    } else if (category === 'pop') {
      this.last_search = 'pop';
      console.log('i am pop');
    } else if (category === 'dubstep') {
      this.last_search = 'dubstep';
      console.log('i am dubstep');
    }
}

【问题讨论】：

为什么要读取 html 元素的 id 并传递事件，而不是直接将字符串值传递给函数？
因为我很笨哈哈。感谢您指出这一点！

标签： javascript typescript onclick angular5 getelementbyid

【解决方案1】：

这是因为无论您通过什么事件，您的第一个条件始终为真。您传递的是一个事件，而不是实际的数据，以及检查一个元素是否存在，即使它已经存在。

【讨论】：

【解决方案2】：

这里 if 和 else 其实不需要，就够了：

public doSearch(category: string) { 
  this.last_search = category;
}

【讨论】：