quando eu clico no link 2 ou 3 é o 1 que fica verde

[Msx 0]

Gente eu tenho o seguinte script:

<p>Clique no link abaixo e espere 10 segundos para mudar de cor</p>

<a id="mudarDeCor" href="https://br.answers.yahoo.com" onclick="myFunction()" target="_blank">Clique Aqui</a> <br/><br/>
<a id="mudarDeCor" href="https://br.answers.yahoo.com" onclick="myFunction()" target="_blank">Clique Aqui2</a> <br/><br/>
<a id="mudarDeCor" href="https://br.answers.yahoo.com" onclick="myFunction()" target="_blank">Clique Aqui3</a> <br/><br/>

<script language="javascript">
function myFunction() {
document.getElementById("mudarDeCor").style.color = "green";
setTimeout(function(){
document.getElementById("mudarDeCor").style.color = "blue";
}, 10000);
}
</script>

Tem um erro nele, quando eu clico no link 2 ou 3 é o 1 que fica verde. Tem como me ajudar? Quero que quando clicar no 1 ele fique verde quando clicar no 2 o próprio 2 fique ver e assim segue...

[wootzor 103]

O problema do teu código é que estás a atribuir o mesmo ID a elementos diferentes quando este atributo deve ser único para cada elemento existente na tua página HTML.

 

Como todos os elementos têm o mesmo ID, o código simplesmente afecta a cor do primeiro elemento existente no DOM com esse ID.

 

Em vez disso, podes usar uma classe. Algo assim:

<p>Clique no link abaixo e espere 10 segundos para mudar de cor</p>
<a class="mudarDeCor" href="#" onclick="myFunction(this)" target="_blank">Clique Aqui</a>
<br/>
<br/>
<a class="mudarDeCor" href="#" onclick="myFunction(this)" target="_blank">Clique Aqui2</a>
<br/>
<br/>
<a class="mudarDeCor" href="#" onclick="myFunction(this)" target="_blank">Clique Aqui3</a>
<br/>

function myFunction(element) {
  element.style.color = "green";
  setTimeout(function() {
    element.style.color = "blue";
  }, 10000);
}

Repara ainda que alterei ligeiramente a função para receber um argumento (this), que referencia o elemento que foi clicado para alterar apenas a cor deste, deixando os outros intactos.

 

Exemplo.

[Msx 0]

Meu amigo deu um jeito pra mim, ele fez assim:

 

<p>Clique no link abaixo e espere 10 segundos para mudar de cor</p>

<a id="id1" href="https://br.answers.yahoo.com" onclick="myFunction(event)" target="_blank">Clique Aqui</a> <br/><br/>

<a id="id2" href="https://br.answers.yahoo.com" onclick="myFunction(event)" target="_blank">Clique Aqui2</a> <br/><br/>

<a id="id3" href="https://br.answers.yahoo.com" onclick="myFunction(event)" target="_blank">Clique Aqui3</a> <br/><br/>

<script language="javascript">

function myFunction(s) {

var id = s.target.id;

document.getElementById(id).style.color = "green";

setTimeout(function(){

document.getElementById(id).style.color = "blue";

}, 10000);

}

</script>