Problema com "onclick event" (night/dark mode)

[Lerub]

Olá.

 

Eu estou tendo um problema com o OnClick Event. Apenas um dos elementos com a mesma tag ou classe seguem esse evento. E é bem possivel que eu tenha que criar um código beeem extenso, para fazer o que eu quero. E isso não é muito bom.

 

Nesse caso, eu usei o elemento A. Mas creio que isso não influencia muito, nesse caso.

 

O JavaScript:

 

<script>
window.onclick = nightMode;

function nightMode() {
    document.getElementsByTagName("FOOTER")[0].style.backgroundColor = "black";
    document.getElementsByClassName("post")[0].style.backgroundColor = "black";
    
}
</script>

Outro problema:

 

Em qualquer lugar da pagina que eu clique, o evento acontece.

 

Edition

 

Eu já resolvi um problema. Mas, ainda afeta apenas um elemento com a mesma classe.

   <script>
function nightMode() {
     document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
 document.getElementsByClassName("post")[0].style.backgroundColor = "black";
}
</script>

[Lerub]

Caramba! To a mais dee 24hrs procurando um meio de fazer isso com JS puro e nada. Será que AJAX resolve o meu problema? Como eu resolvo isso?

 

 

Edit

Eu não sei mais onde procurar. O que me sugerem?

 

Resultado:

 

Obrigado por nã ajudarem!

 

A maneira que eu consegui fazer isso, foi o que eu não  queria fazer. uma "gambiarra"

 

<script>

function nightMode() {
    document.getElementsByTagName("BODY")[0].style.background = "black";
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";
}
</script>