Skip to main content
adicionou 27 caracteres ao conteúdo
Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51

Sempre que tem muito código repetido significa que não está a fazer as coisas da melhor forma e acaba por dificultar mais à frente quando precisa de alterar ou manter o código.

Pode refatorar o código um pouco utilizando um array para os <div> a mostrar/esconder e para cada click esconder todos os <div> e de seguida mostrar o que foi clicado.

Exemplo:

const divs = [...document.querySelectorAll('#myDIV,#myDIV2,#myDIV3')];
const botoes = [...document.querySelectorAll("button")];

for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes
  botoes[i].addEventListener("click", function(){ //definir o click para cada um
    divs.forEach(x=>xdiv => div.style.display="none"display = "none"); //esconder todos os divs
    divs[i].style.display="block";display = "block"; //mostrar o que foi clicado
  }); 
}

divs.forEach(x=>xdiv => div.style.display="none"display = "none"); //iniciar todos escondidos
#myDIV {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin: 0 auto;
}

#myDIV2 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: green;
    margin: 0 auto;
    display: none;
}

#myDIV3 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin: 0 auto;
    display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>

<div id="myDIV">This is my DIV element.</div>
<div id="myDIV2">This is my DIV element.</div>
<div id="myDIV3">This is my DIV element.</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

</body>
</html>

Como atribui o evento de click diretamente no javascript tornou-se desnecessário ter o atributo onclick em cada um dos botões.

Sempre que tem muito código repetido significa que não está a fazer as coisas da melhor forma e acaba por dificultar mais à frente quando precisa de alterar ou manter o código.

Pode refatorar o código um pouco utilizando um array para os <div> a mostrar/esconder e para cada click esconder todos os <div> e de seguida mostrar o que foi clicado.

Exemplo:

const divs = [...document.querySelectorAll('#myDIV,#myDIV2,#myDIV3')];
const botoes = [...document.querySelectorAll("button")];

for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes
  botoes[i].addEventListener("click", function(){ //definir o click para cada um
    divs.forEach(x=>x.style.display="none"); //esconder todos os divs
    divs[i].style.display="block"; //mostrar o que foi clicado
  }); 
}

divs.forEach(x=>x.style.display="none");
#myDIV {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin: 0 auto;
}

#myDIV2 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: green;
    margin: 0 auto;
    display: none;
}

#myDIV3 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin: 0 auto;
    display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>

<div id="myDIV">This is my DIV element.</div>
<div id="myDIV2">This is my DIV element.</div>
<div id="myDIV3">This is my DIV element.</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

</body>
</html>

Como atribui o evento de click diretamente no javascript tornou-se desnecessário ter o atributo onclick em cada um dos botões.

Sempre que tem muito código repetido significa que não está a fazer as coisas da melhor forma e acaba por dificultar mais à frente quando precisa de alterar ou manter o código.

Pode refatorar o código um pouco utilizando um array para os <div> a mostrar/esconder e para cada click esconder todos os <div> e de seguida mostrar o que foi clicado.

Exemplo:

const divs = [...document.querySelectorAll('#myDIV,#myDIV2,#myDIV3')];
const botoes = [...document.querySelectorAll("button")];

for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes
  botoes[i].addEventListener("click", function(){ //definir o click para cada um
    divs.forEach(div => div.style.display = "none"); //esconder todos os divs
    divs[i].style.display = "block"; //mostrar o que foi clicado
  }); 
}

divs.forEach(div => div.style.display = "none"); //iniciar todos escondidos
#myDIV {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin: 0 auto;
}

#myDIV2 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: green;
    margin: 0 auto;
    display: none;
}

#myDIV3 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin: 0 auto;
    display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>

<div id="myDIV">This is my DIV element.</div>
<div id="myDIV2">This is my DIV element.</div>
<div id="myDIV3">This is my DIV element.</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

</body>
</html>

Como atribui o evento de click diretamente no javascript tornou-se desnecessário ter o atributo onclick em cada um dos botões.

Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51

Sempre que tem muito código repetido significa que não está a fazer as coisas da melhor forma e acaba por dificultar mais à frente quando precisa de alterar ou manter o código.

Pode refatorar o código um pouco utilizando um array para os <div> a mostrar/esconder e para cada click esconder todos os <div> e de seguida mostrar o que foi clicado.

Exemplo:

const divs = [...document.querySelectorAll('#myDIV,#myDIV2,#myDIV3')];
const botoes = [...document.querySelectorAll("button")];

for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes
  botoes[i].addEventListener("click", function(){ //definir o click para cada um
    divs.forEach(x=>x.style.display="none"); //esconder todos os divs
    divs[i].style.display="block"; //mostrar o que foi clicado
  }); 
}

divs.forEach(x=>x.style.display="none");
#myDIV {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin: 0 auto;
}

#myDIV2 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: green;
    margin: 0 auto;
    display: none;
}

#myDIV3 {
    width: 30%;
    padding: 50px 0;
    text-align: center;
    background-color: red;
    margin: 0 auto;
    display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>

<div id="myDIV">This is my DIV element.</div>
<div id="myDIV2">This is my DIV element.</div>
<div id="myDIV3">This is my DIV element.</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

</body>
</html>

Como atribui o evento de click diretamente no javascript tornou-se desnecessário ter o atributo onclick em cada um dos botões.