Блог

У меня вопрос — как динамически изменять функцию, которая назначена кнопке? Я хотел бы изменить функцию в кнопках после того, как пользователь выбрал один вариант. Сейчас я использую if , но я повторяю свой собственный код, изменяя видимость. Могу ли я использовать кнопки «вопрос2» только один раз и изменять, что они будут делать динамически?

Я пытался:

 document.getElementById("id").setAttribute("click", "select(darkred)");
document.getElementById("id").setAttribute("onclick", "select(darkred)");
document.getElementById("id").setAttribute("(click)", "select(darkred)");
  

Но они не сработали.

 <div name="question1">
  <button (click)="select('red')">Select Red</button>
  <button (click)="select('green')">Select Green</button>
</div>

<!-- The result of answer will change function which is assigned to next buttons -->

<div name="question2" [hidden]="isRed">
  <button (click)="select('lightred')">Select Light</button>
  <button (click)="select('darkred')">Select Dark</button>
</div>
<div name="question2" [hidden]="isGreen">
  <button (click)="select('lightgreen')">Select Light</button>
  <button (click)="select('darkgreen')">Select Dark</button>
</div>
  

App.component.ts:

 export class AppComponent implements OnInit {
  isRed = true;
  isGreen = true;

  select(color: string) {
    if (color === 'red') {
      isRed = false;
      isGreen = true;
    }
    if (color === 'green') {
      isRed = true;
      isGreen = false;
    }
  }
  

Я бы предложил следующее:

 <div name="question1">
  <button (click)="selectBaseColor('red')">Select Red</button>
  <button (click)="selectBaseColor('green')">Select Green</button>
</div>

<!-- The result of answer will change function which is assigned to next buttons -->

<div name="question2">
  <button (click)="selectBrightness('light')">Select Light</button>
  <button (click)="selectBrightness('dark')">Select Dark</button>
</div>
  

App.component.ts:

 export class AppComponent implements OnInit {
  selectedBaseColor = null;
  selectedBrightness = null;

  selectBaseColor(color: string) {
    this.selectedBaseColor = color;
  }

  selectBrightness(brightness: string) {
    this.selectedBrightness = brightness;
  }
  

альтернативный вариант следуя вашему стилю, вам не нужно изменять функцию, но ее аргументы:

 <div name="question1">
  <button (click)="select('red')">Select Red</button>
  <button (click)="select('green')">Select Green</button>
</div>

<!-- The result of answer will change function which is assigned to next buttons -->

<div name="question2" [hidden]="isRed">
  <button (click)="select(isRed ? 'lightred' : 'lightgreen')">Select Light</button>
  <button (click)="select(isRed ? 'darkred' : 'darkgreen')">Select Dark</button>
</div>
  

Если цветов больше, чем красного и зеленого, вам следует поместить встроенное ‘if’ в ваш файл component.ts.

Я решил эту проблему таким образом:

  <div name="question1">
  <button (click)="select('red')">Select Red</button>
  <button (click)="select('green')">Select Green</button>
</div>

<div name="question2">
  <button #button1 id="button1" (click)="select(button1.name)">Select Light</button>
  <button #button2 id="button2" (click)="select(button2.name)">Select Dark</button>
</div>

export class AppComponent implements OnInit {
  select(color: string) {
  switch(color){
    case "red":
      document.getElementById("button1").setAttribute("name", "lightred");
      document.getElementById("button2").setAttribute("name", "darkred");
    case "green":
      document.getElementById("button1").setAttribute("name", "lightgreen");
      document.getElementById("button2").setAttribute("name", "darkgreen");
        }
    }
}