La idea es que al hacer click sobre los span, estos cambien de imagen, color(hasta aquí bien) y se modifique la variable aceptadas o rechazadas según sea el caso. El problemas viene cuando se hace un 'triple clic' o superior en el mismo span, sólo reaccionan los que hayan sido activados(clicados al menos una vez), y el resto no cambia de color ni imagen, además de que sólo acepta aparecer como aceptada repetida tantas veces como se haya clicado.
Si además me ayudáis a eliminar las comas esas repetidas, mejor que mejor.
El código:
Código:
<script type="text/javascript">
<!--
var rechazadas= '';
var aceptadas= '';
var palabras=["sed","ut","amet","sit"];
function etiquetas(id,div,im){
if(im.src=='aceptar.png'){
im.src='eliminar.png';
div.style.backgroundColor="#f58a8a";
rechazadas= rechazadas + ',' + palabras[id];
buenas=aceptadas.split(',');
for(i=0;i<aceptadas.length;i++){
if(buenas[i]==palabras[id]){
delete buenas[i];
}
}
aceptadas=buenas;
}else{
aceptadas= aceptadas + ',' + palabras[id];
if(rechazadas){
malas=rechazadas.split(',');
for(i=0;i<rechazadas.length;i++){
if(malas[i]==palabras[id]){
delete malas[i];
}
}
rechazadas=malas;
}
im.src='aceptar.png';
div.style.backgroundColor="#8af592";
}
}
function mostrar(){
document.write('Rezhazadas: 'rechazadas + '<hr>Aceptadas: ' +aceptadas);
}
-->
</script>
<span id="et_0" class="etiquetas" onclick="etiquetas(0,document.getElementById('et_0'))" style="background-color:#1e82ff;">sed<img id="etiquetas_0" class="imagen_etiquetas" src="duda.png" alt="" width="20" height="20" /></span><span id="et_1" class="etiquetas" onclick="etiquetas(1,document.getElementById('et_1'))" style="background-color:#2a89ff;">ut<img id="etiquetas_1" class="imagen_etiquetas" src="duda.png" alt="" width="20" height="20" /></span><span id="et_2" class="etiquetas" onclick="etiquetas(2,document.getElementById('et_2'))" style="background-color:#368fff;">amet<img id="etiquetas_2" class="imagen_etiquetas" src="duda.png" alt="" width="20" height="20" /></span><span id="et_3" class="etiquetas" onclick="etiquetas(3,document.getElementById('et_3'))" style="background-color:#3f94ff;">sit<img id="etiquetas_3" class="imagen_etiquetas" src="duda.png" alt="" width="20" height="20" /></span>
<div onClick="mostrar()">Mostrar</div>