javascript - 根据按钮值切换div内容

Question

我正在尝试弄清楚如何根据按钮值切换 div 的内容，我使用的是 angular2+。 这是我的 HTML 和我的 js

export class TestComponent implements OnInit {
  title:string = "provas";

  constructor() {
  }

  populateData(event){
    var testTitle = document.querySelector('.prova-expand-title');
    var testDesc = document.querySelector('prova-expand-desc');
    
      var htmlTitle = "";
      var htmlDesc = "";


    switch(event.getAttribute('value')){
      case 'distancia':{
        htmlTitle="chute em distância";
        htmlDesc="O participante pega impulso e salta sobre obstáculos alinhados executando o golpe 'timio Iop tchagui', famosa voadora. Aquele que pular mais obstáculos é o vencedor"
        break;
      }
      case 'altura':{
        htmlTitle="chute em altura";
        htmlDesc="O participante pega impulso para saltar entre duas traves unidas por uma corda, executando o golpe 'timio iop tchagui', famosa voadora. A corda sobe de acordo com os níveis das traves, aquele que alcançar o maior nível é o vencedor.";
        break;
      }
      case 'poomsae':{
        htmlTitle="poomsae";
        htmlDesc="Os participantes executam os movimentos de suas respectivas faixas, ganha aquele que tiver a melhor performance e menos erros.";
        break;
      }

    }
    testTitle.innerHTML = htmlTitle;
    testDesc.innerHTML = htmlDesc; 
  }

  ngOnInit() {

  }
}

<div class="columns">
  <div class="column">
      <div id="distancia" class="prova-card distancia">
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">salto em distância</div>
              <div class="prova-toggle-btn" (click)="populateData(event)" value="distancia"></div>
          </div>
      </div>
  </div>

  <div class="column">
      <div id="altura" class="prova-card altura" >
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">salto em altura</div>
              <div class="prova-toggle-btn" (click)="populateData(event)" value="altura"></div>
          </div>
      </div>
  </div>

  <div class="column">
      <div id="poomsae" class="prova-card poomsae" >
          <div class="fundo-preto-transparente"></div>
          <div class="prova-conteudo">
              <div class="prova-title">poomsae</div>
              <div class="prova-toggle-btn" (click)="populateData(event)" value="´poomsae"></div>
          </div>
      </div>
  </div>
</div>

当我点击按钮时，这是我得到的错误:ERROR TypeError: Cannot read property 'target' of undefined。

这是我对我正在尝试做的事情的 codepen 测试 https://codepen.io/mardico/pen/xWPyJz?editors=1010

提前致谢。

Answer 1

在您的 (click) 处理程序中，您需要使用 $event 而不是 event