3

Fiz uma função que ao clicar no botão ela muda a cor do texto e fundo de uma div

Porém, eu tive que fazer duas linhas de comando. Há alguma formar de fazer tudo numa linha só?

<body>
  <div id="texto">
        texto
   </div>
    <button onclick="mudarDiv()">ALTERANDO</button>
</body>

<script>
   function mudarDiv() {
      var div = document.getElementById('texto').innerHTML = 'teste'; /* MUDA O TEXTO  DA DIV PARA "TESTE" */
      document.getElementById('texto').style.background = "red"; /*MUDA O BACKGROUND DA DIV PARA VERMELHO*/
   }
</script>
3
  • 2
    "Uma linha só" não significa muita coisa, pois eu posso fazer um código enorme numa linha só.
    – Sam
    Commented 29/07/2019 às 23:37
  • 2
    E porque precisa disto?
    – Maniero
    Commented 29/07/2019 às 23:55
  • Me expressei errado. o que quis dizer é que se seria possivel em um comando só, fazer essas duas coisas. Commented 31/07/2019 às 0:03

3 Respostas 3

14

Escrever códigos curtos não deve ser um objetivo. Escrever códigos expressivos e canônicos deve ser algo a ser perseguido. Tentar escrever tudo em uma linha não tem nada de mais expressivo ou canônico. Tentar escrever código curto pode torná-lo menos legível e menos performático. Isto é o oposto do DRY.

Estas são duas operações completamente distintas e não tem porque tentar fazer tudo junto, nem faria sentido do ponto de vista lógico.

Até daria pra criar uma função genérica que você passa um objeto com os membros que quer manipular e os valores que quer passar e fazer um laço que manipule todo o DOM que você especificou, mas isso não é performático, torna tudo menos legível, é uma generalização prematura, uma abstração exagerada e provavelmente vazamento ao mesmo tempo (um fenômeno), e na prática a chamada do código será mais complexo, e o próprio código terá mais linhas, o que só tem desvantagens.

Dá até medo sugerir isto porque pode ficar tentado a fazer, mas acho que é sempre bom falar do que dá para fazer, quem sabe as pessoas olhem pra isso e ficam mais criativas, pena que neste caso é criatividade para fazer pior, mas dá ideias, algo que as pessoas não tem mais, quase todos copiam fórmulas e não criam nada.

Esse caso a função é muito clara do que deve fazer e de forma bem específica, esta forma parece bem adequada, exceto por um detalhe que dá pra discutir se deveria fazer, que deixaria o código mais curto, mais canônico (mais DRY), ainda que não tão necessário e até mais performático, tudo de bom, exceto que terá uma linha a mais, o que não é ruim.

Curiosamente você está preocupado com menos linhas, mas não com organização do código que é muito mais importante. Menos linhas é algo útil quando essas linhas são desnecessárias. Ou qualquer código que seja desnecessário não deveria estar ali, por exemplo essa obsessão que as as pessoas tem de criar variável sem necessidade, essa variável div não faz sentido. Mas se quiser tornar o o código mais eficiente e canônico, além de mais curto, mesmo tendo uma linha a mais, aí faria sentido criar uma variável para guardar o elemento.

function mudarDiv() {
    var texto = document.getElementById('texto');
    texto.innerHTML = 'teste';
    texto.style.background = 'red';
}

Coloquei no GitHub para referência futura.

Os comentários não fazem o menor sentido porque são obviedades e violam o DRY, ainda mais em caixa alta, e colocar o comentário ainda está tornando o código maior sem trazer vantagens, na verdade só traz desvantagens. As aspas estão inconsistentes e embora não cause problema, é mais indicativo que não se preocupa com a legibilidade. Está se preocupando com as coisas erradas.

Tem certeza que innerHTML é a melhor opção pro seu caso? Vejo as pessoas sempre usando porque copiam de algum exemplo que não tinha contexto, mas a impressão que eu tenho é que quase sempre é o mecanismo errado pra fazer o que deseja. Só estou questionando.

2
  • 1
    "por exemplo essa obsessão que as as pessoas tem de criar variável sem necessidade" – parece que você está falando do bloco de código logo abaixo, onde a variável faz sentido (você mesmo que criou rs). Pode confundir algumas pessoas, acho que seria melhor cortar o trecho de código ou explicar melhor o que ele faz ali.
    – bfavaretto
    Commented 30/07/2019 às 18:44
  • Melhorei isso e algumas outras coisas.
    – Maniero
    Commented 30/07/2019 às 18:46
2

São operações distintas e, com o que o JavaScript lhe oferece, não da pra (diretamente) realizar as duas operações em uma só linha.

Entretanto, existe uma biblioteca chama jQuery que pode lhe ajudar em diminuir o tamanho do seu código, mantendo-o legível.

O código:

var texto = document.getElementById('texto');
texto.innerHTML = 'teste';
texto.style.background = 'red';

Em jQuery ficaria:

$("#texto").html("teste").css("background", "red");
1

Além do que foi respondido seria interessante passar os valores como parametros, fazendo da função reutilizavel. Por exemplo:

 <body>
    <div id="texto">
        texto
    </div>
    <button onclick="mudarDiv('texto', 'teste', 'red')">ALTERANDO</button>
</body>

<script>
   function mudarDiv(elemento, novoTexto, novaCor) {
      var div = document.getElementById(elemento');
      texto.innerHTML = novoTexto';
      texto.style.background = novaCor';
   }
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .