Blogger apresenta poblemas com nightMode

[Lerub]

Eu resolvi adicionar essa modo em meu blog. Só que há um erro, ao acessar a postagem. Na página inicial, aparece normal.

 

Eis o código:

<a class='night' href='#' onclick='nightMode()'>"emojilua"</a>
    <a class='night' href='#' onclick='dayMode()'>"emojisol"</a>

 

<script>

function nightMode() {
    document.getElementsByTagName("BODY")[0].style.background = "black";
document.getElementsByTagName("BODY")[0].style.color = "white";
document.getElementsByClassName("post")[0].style.backgroundColor = "#363636";
document.getElementsByTagName("P")[0].style.color = "white";
document.getElementsByClassName("post")[1].style.backgroundColor = "#363636";
document.getElementsByTagName("P")[1].style.color = "white";
document.getElementsByClassName("post")[2].style.backgroundColor = "#363636";
document.getElementsByTagName("P")[2].style.color = "white";
document.getElementsByTagName("footer")[0].style.backgroundColor = "#363636";
document.getElementsByTagName("footer")[0].style.color = "white";
document.getElementsByClassName("column-right-outer")[0].style.background = "#363636";
document.getElementsByClassName("column-right-outer")[0].style.color = "white";
document.getElementsByClassName("subtitle")[0].style.color = "gray";
}
</script>

 

O que acontece, aqui?

[DiF]

@Lerub Olá, 

já tentou fazer com jQuery?

É mais fácil de manipular. Veja um exemplo simples baseado no seu código:

$(document).ready(function(){
    
      //executa algo quando o elemento com a class night é clicado
      $(".night").on('click', function(){
          $("body").css({"background": "black", "color": "white"});
          $(".post").css({"background": "#363636"});
          $("p").css({"color": "white"});
          $("footer").css({"background": "#363636", "color": "white"});
   });
});

Obviamente, no código exemplo falta o resto dos elementos que você quer mudar. Afinal é só um exemplo mesmo.

Veja funcionando o exemplo: https://jsfiddle.net/9rLoo2b0/

[Lerub]

Não curto muito.

[DiF]

@Lerub Bem, recomendo rever sobre isso. O javascript puro as vezes é ruim.

Embora dê para fazer o que quiser com ele, mesmo tendo mais trabalho, o jQuery é 100x melhor e mais rápido, encurta o código, aceita encadeamento de funções e permite a integração com centenas e milhares de plugins.

Praticamente a maioria dos sites e blogs usam,  aqui o fórum usa, até o popcorn time usa!  

O que você faz em 20 linhas em JS puro, você faz o mesmo em 5 ou 6 linhas  dependendo do código!

 

[Lerub]

Confesso que eu tenho um certo preconceito, quanto essas linuagens. Devido o uso desnecessário, da galéra, para fazer coisas que podem sem feitas com CSS. Enfim... vou ver como eu resolvo isso.

[DiF]

@Lerub

6 minutos atrás, Lerub disse:

Confesso que eu tenho um certo preconceito, quanto essas linuagens. Devido o uso desnecessário, da galéra

Não existe uso desnecessário. Você tem opções de como implementar.

Seja usar Javascript puro,  jQuery, prototype, Angular, e etc.

 

Todas essas são javascript, não difere em nada nenhuma delas, a única diferença é que jQuery, Angular, prototype é que são bibliotecas escritas em javascript que facilitam o desenvolvimento.

 

Vai por mim, use o jQuery e deixe seu código menor e mais elegante.

 

11 minutos atrás, Lerub disse:

para fazer coisas que podem sem feitas com CSS

Sim, atualmente tem várias coisas que podem ser feitas via CSS, como Animações, efeitos de hover, galerias e vários efeitos... mas nem tudo dá para fazer com ele.. então é aí que entra a intervenção do javascript.

JS puro, é bem trabalhoso de programar é como se você quisesse montar um carro, mas para isso precisa fabricar a matéria-prima para fabricar as peças para depois montar o carro.  rsrs

 

Já com jQuery, você já tem tudo à mão, basta saber como implementar!

 

 

[Lerub]

Sei. De qualquer forma, eu gosto de saber  como isso funciona. E outra, ja ouv falar em falhas. Não lembro se no JQuery ou AJAX. E pela entonação, parecem ser sérias. Tenho receio de prejudicar a segurança.

 

Edit:

 

Fazem 30 min e ninguém respondeu... Como eu resolvo isso?