javascript - Colocar duas funções dentro de uma - Stack Overflow em Português
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ó?
<button onclick="mudarDiv()">ALTERANDO</button>
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*/
editada 31/07/19 às 12:55
"Uma linha só" não significa muita coisa, pois eu posso fazer um código enorme numa linha só. – Sam 29/07/19 às 23:37
E porque precisa disto? – Maniero♦ 29/07/19 às 23:55
Me expressei errado. o que quis dizer é que se seria possivel em um comando só, fazer essas duas coisas. – Danilo Vasconcelos 31/07/19 às 0:03
Escrever código 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 olham 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.
Este casos 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.
texto.innerHTML = 'teste';
texto.style.background = 'red';
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.
editada 31/07/19 às 15:10
respondida 30/07/19 às 12:54
"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♦ 30/07/19 às 18:44
Melhorei isso e algumas outras coisas. – Maniero♦ 30/07/19 às 18:46
Além do que foi respondido seria interessante passar os valores como parametros, fazendo da função reutilizavel. Por exemplo:
<button onclick="mudarDiv('texto', 'teste', 'red')">ALTERANDO</button>
function mudarDiv(elemento, novoTexto, novaCor) {
var div = document.getElementById(elemento');
texto.innerHTML = novoTexto';
texto.style.background = novaCor';
respondida 30/07/19 às 18:34
Gian SouzaGian Souza
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.