<span> onclick si innerHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var j,i=1;
vec=new Array();
for(j=1;j<4;j++)
{
vec[j]="cuv"+j+"";
}
function schimba(object)
{
i++;
if(i==4) 
{
	i=1;
}
object.innerHTML=vec[i];
}</script>
</head>
<body>
<span id="bla" name="bla" style="cursor:pointer;" onclick="schimba(this)">cuv1</span>
<span id="bla1" name="bla1" style="cursor:pointer;" onclick="schimba(this)">cuv1</span>
</body>
</html>

codul de mai sus schimba pentru fiecare span valoarea acestuia cu o alta valoare diferite intre ele(in script am creat un vector care stocheaza valori de forma cuvi, unde i de la 0 la 3incluciv, care difera doar de contorul i de care am spus), insa codul de mai sus imi afecteaza valorile intre spanuri, insa eu vreau ca pentru fiecare click dat pe unul dintre spanuri sa imi schimbe valorea fara sa afecteze si pe cea a celulilat, pentru k dak de ex incarc pagina cu codul de mai sus si dau click pe cuv1, primul span, o sa imi modifice in cuv2, insa dak dau si pe al doilea care la incarcarea paginii era si el cuv1, acuma trece la cuv3; e problema de manipularea a var i care ar trebui sa fie locala dar totusi nush ce ar trebui de facut. dak aveti vreo rez va rog sa mio aratati. multumesc

probabil este si o solutie mai eleganta, mai automatizata/factorizata

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
vec=new Array();
pos=new Array();

for(j=1;j<4;j++)
{
vec[j]="cuv"+j+"";
}

pos[1] = 1;
pos[2] = 1;

function schimba(index, object)
{	
pos[index]++;
if (pos[index] == 4)
{
	pos[index] = 1;
}

object.innerHTML = vec[pos[index]];
}
</script>
</head>
<body>
<span id="bla" name="bla" style="cursor:pointer;" onclick="schimba(1, this)">cuv1</span>
<span id="bla1" name="bla1" style="cursor:pointer;" onclick="schimba(2, this)">cuv1</span>
</body>
</html>