[Dúvida] Alguem consegue fazer esse codigo funcionar?

Testando seu código aqui, descobri que o problema está nos valores que você está usando para checar se os caminhos de src são iguais. Enquanto "img/teste1.jpg" é um caminho relativo, o caminho gerado por document.getElementById("imgClickAndChange").src é um caminho absoluto, por isso, o teste nunca vai ser verdadeiro.

Quando passei um console.log(document.getElementById("imgClickAndChange").src) aqui, por exemplo, obtive o seguinte caminho:

http://127.0.0.1:5500/01-sorting/02-two-or-more-columns/img/teste1.jpg

(No caso, estou usando um servido local, por isso não está aparecendo C://User....)

Então, se eu comparar os caminhos, teremos um false como resposta:

"http://127.0.0.1:5500/01-sorting/02-two-or-more-columns/img/teste1.jpg" === "img/teste1.jpg"
// false

Como resolver isso?

Talvez não seja a única, mas foi a que encontrei. Usando .getAtrribute().

No caso, usamos em conjunto com o seletor do elemento, passando src como argumento, como no exemplo abaixo. Aí só mudaria a linha do seu if, que ficaria assim:

function changeImage() {
    if (document.getElementById("imgClickAndChange").getAttribute('src') == "img/teste1.jpg"){    
        // Aqui não muda
    } // Restante do código não muda
}

Link para saber e conhecer mais:

1. MDN Docs - Element.getAttribute()
2. Alura - Caminhos: entenda as diferenças entre absolutos e relativos

Muito obrigado pela ajuda!!! vou estudar mais sobre o conteudo!! por acaso posso tirar outra duvida com vc?

Se eu puder ajudar, claro!

Então eu gostaria de poder aplicar a mudança de cor do plano de fundo para todos os itens de dentro da lista, mas ainda nao consegui pensar em como posso estruturar isso. Já consegui implementar a mudança para uma classe em espcifico, porem preciso aplicar a uma lista de classes.

Html

<a class="teste"  onclick="mudaParaVermelho()">C</a>
<a class="teste_dois"  onclick="mudaParaVermelho()">D</a>

JavaScript

listaClasse = ["teste", "teste_dois"]
valor = 0

function mudaParaVermelho() {
    var galleries = document.getElementsByClassName(`${listaClasse}`);
    console.log(galleries)
    var len =  galleries.length;

    if(valor == 0) {
        valor++
        for(var i=0 ; i<len; i++){
            galleries[i].style.backgroundColor="red";
            console.log("vermelho")}
    }else {
        valor--
        for(var i=0 ; i<len; i++){
            galleries[i].style.backgroundColor="white";
            console.log("branco")}

        }
}

Desculpe, não ficou muito claro o que você quer fazer. Poderia explicar com mais detalhes, por favor? =) Você quer usar um elemento para trocar a cor de fundo de todos os elementos?

Então, ficou meio confuso, mas vou tentar explicar. Eu queria que dependendo do botão que eu apertasse, o getElementsByClass conseguisse capturar a classe do botão que apertei para assim executar a função de mudar a cor. Eu consegui fazer isso para um elemento em espcifico, mas para fazer para os demais botões que vou colocar (cada um com uma classe diferente) eu teria que repetir o mesmo código para cada um, logo estou pensando em uma forma de automatizar isso e economizar no codigo. Haverá momentos que vou precisar de mais de um botão ativo ao mesmo tempo, logo pensei em ao clicar no botão ele adicionar o nome da sua respectiva classe no array para poder ser iterado pelo getElementByClass e ao clicar novamente ele excluir o nome da sua classe do array e voltar sua cor para .

Desculpe, está bem corrido no projeto onde estou. Você conseguiu resolver essa última dúvida?