Switch div content based on button value

Question

i'm trying to figure out how to switch the content of a div based on button values, i'm using angular2+. Here's my HTML and my 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() {

  }
}


  
      
          
          
              salto em distância
              
          
      
  

  
      
          
          
              salto em altura
              
          
      
  

  
      
          
          
              poomsae

When I click on the button, this is the error I get: ERROR TypeError: Cannot read property 'target' of undefined.

here's my codepen test of what i'm trying to do https://codepen.io/mardico/pen/xWPyJz?editors=1010

thanks in advance.

Patryk Gułaś · Accepted Answer

Don't use querySelectors and innerHTML. Let's make it more Angular way:

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

  constructor() {
  }

  populateData(event, value){
    switch(value){
      case 'distancia':{
        this.expandedTitle = "chute em distância";
        this.expandedDescription = "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':{
        this.expandedTitle = "chute em altura";
        this.expandedDescription ="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':{
        this.expandedTitle = "poomsae";
        this.expandedDescription = "Os participantes executam os movimentos de suas respectivas faixas, ganha aquele que tiver a melhor performance e menos erros.";
        break;
      }

    }
  }

  ngOnInit() {

  }
}


  
      
          
          
              salto em distância
              
          
      
  

  
      
          
          
              salto em altura
              
          
      
  

  
      
          
          
              poomsae

And in the HTML where you have expanded values something like this:

{{ expandedTitle }}
{{ expandedDescription }}

Now you are trying to do it in pure Javascript. Make use of Angular.

Switch div content based on button value

Answers (2)

Related Questions