How to show a DIV and hide others with Javascript?

Asked

Viewed 56 times

-1

wanted help with this code. I made it and it works, but I wanted to dry it because it’s very verbose and ugly. I’m a beginner in javascript. The single quotes are because the code goes inside a PHP ECHO. Note: I don’t want to do with jQuery.

Thanks in advance for the help!

function filtro(){
    getValue = document.getElementById('selecao').value;
    if(getValue == ''){
        document.getElementById('ano_grau').style.display = 'none';
        document.getElementById('curso').style.display = 'none';
        document.getElementById('cargo').style.display = 'none';
        document.getElementById('avaliacao').style.display = 'none';
        document.getElementById('disponibilidade').style.display = 'none';
    }
    if(getValue == 'ano_grau'){
        document.getElementById('ano_grau').style.display = 'block';
        document.getElementById('cargo').style.display = 'none';
        document.getElementById('curso').style.display = 'none';
        document.getElementById('avaliacao').style.display = 'none';
        document.getElementById('disponibilidade').style.display = 'none';
    }
    if(getValue == 'curso'){
        document.getElementById('curso').style.display = 'block';
        document.getElementById('cargo').style.display = 'none';
        document.getElementById('ano_grau').style.display = 'none';
        document.getElementById('avaliacao').style.display = 'none';
        document.getElementById('disponibilidade').style.display = 'none';
    }
    if(getValue == 'cargo'){
        document.getElementById('cargo').style.display = 'block';
        document.getElementById('curso').style.display = 'none';
        document.getElementById('ano_grau').style.display = 'none';
        document.getElementById('avaliacao').style.display = 'none';
        document.getElementById('disponibilidade').style.display = 'none';
    }
    if(getValue == 'avaliacao'){
        document.getElementById('ano_grau').style.display = 'none';
        document.getElementById('curso').style.display = 'none';
        document.getElementById('cargo').style.display = 'none';
        document.getElementById('avaliacao').style.display = 'block';
        document.getElementById('disponibilidade').style.display = 'none';
    }
    if(getValue == 'disponibilidade'){
        document.getElementById('ano_grau').style.display = 'none';
        document.getElementById('curso').style.display = 'none';
        document.getElementById('cargo').style.display = 'none';
        document.getElementById('avaliacao').style.display = 'none';
        document.getElementById('disponibilidade').style.display = 'block';
    }
    
}
    <select id='selecao' onChange='filtro()'>
    <option value='' selected>Selecione uma opção</option>
    <option value='ano_grau'>Ano em que colou grau</option>
    <option value='curso'>Curso realizado depois de formado</option>
    <option value='cargo'>Cargo atual</option>
    <option value='avaliacao'>Avaliação entre a formação e a exigência do cargo</option>
    <option value='disponibilidade'>Disponibilidade de colaboração com a faculdade por meio de entrevistas e palestras</option>
    </select>

javascript

  • Your code above seems to be incomplete...

  • i put HTML just to show that this is a select. I really want to dry javascript.

  • 1

    Without the full code I won’t be able to help you, otherwise I’ll have to kick an answer.

  • 2

    Whenever posting a question, it is important to explain the difficulty encountered and always provide a [mcve] of the problem. To understand what kind of question serves the site and, consequently, avoid closures and negativities worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.

1 answer

2

Well, each one has a style, I first started all the elements to display = none and as you choose in the check box take the same value and have it show with the same name as the div, example:

function init() {
  document.getElementById('ano_grau').style.display = 'none';
  document.getElementById('curso').style.display = 'none';
  document.getElementById('cargo').style.display = 'none';
  document.getElementById('avaliacao').style.display = 'none';
  document.getElementById('disponibilidade').style.display = 'none';
}

function filtro() {
  init();
  const getValue = document.getElementById('selecao').value;  
  if (getValue) {
    document.getElementById(getValue).style.display = 'block';
  }
}

(function() {
  filtro();
})();
<div>
  <select id='selecao' onChange='filtro()'>
    <option value='' selected>Selecione uma opção</option>
    <option value='ano_grau'>Ano em que colou grau</option>
    <option value='curso'>Curso realizado depois de formado</option>
    <option value='cargo'>Cargo atual</option>
    <option value='avaliacao'>Avaliação entre a formação e a exigência do cargo</option>
    <option value='disponibilidade'>Disponibilidade de colaboração com a faculdade por meio de entrevistas e palestras</option>
  </select>
</div>
<div style="margin: 5px">
  <div id="ano_grau">Ano Grau</div>
  <div id="curso">Curso</div>
  <div id="cargo">Cargo</div>
  <div id="avaliacao">Avaliação</div>
  <div id="disponibilidade">Disponibilidade</div>
</div>

If I had the HTML, maybe I can decrease the code more, but I believe that this was very clear how to proceed with optimization, code reading and maintenance that can later happen.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.