CODEWITHSUNDEEP
javascripttypescriptonclickangular5getelementbyid
asus
asus

Reputation: 1759

Javascript/Angular 5 - clicking multiple buttons only affects one

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

Upvotes: 3

Views: 1672

Answers (2)

ConstantinEx
ConstantinEx

Reputation: 190

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

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

Upvotes: 0

Tony Stonks
Tony Stonks

Reputation: 360

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.

Upvotes: 2

Related Questions