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

Question

I have a grid of 4 buttons and once one of them is clicked it will call a function called doSearch which checks which button was clicked and based on that assigns a string to the last_search value.

However, when I click any of the four buttons, I always seem to only press the edm button and reads 'i am edm' to console.

Could anyone explain why that is?

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>

function code

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');
    }
}

---

FIX:

instead of passing the id of the button, I decided to pass a string directly into the function call of doSearch

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>

function

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');
    }
}

Answer 1

It's because no matter what event you pass, your 1st condition is always true. You are passing an event, not the actual data, as well as checking if an element exists even if it already is.

Answer 2

You actually don't need here if and else, it's enough:

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