Error al comparar innerHTML

Rizz · #1 (**permalink**) 11/04/2009, 08:16

Hola a todos, es mi primera vez que escribo aqui.

Bien, he hecho una web con una barra de menu que permite cambiar el idioma. Esta barra funciona con javascript...

Cuando comparo innerHTML entre si, me funciona correctamente hasta que pongo, por ejemplo:

Código:

<span onclick='mi_funcion()'>Texto1</span>

Aqui deja de funcionar la comparacion i me sale como falsa...

En definitiva, que la comparacion cambia de cierto a falso dependiendo del contenido del innerHTML. Alguien podria decirme a que se debe?

Os dejo el trozo de codigo...

Asi no funciona:

Código:

var textPiercingFotos = [];
textPiercingFotos['Català'] = "<a href='javascript:fotosPiercingsCella();'>Cella</a>";
textPiercingFotos['Español'] = "texto español";
textPiercingFotos['English'] = "english text";

Asi no funciona:

Código:

var textPiercingFotos = [];
textPiercingFotos['Català'] = "<span onclick='fotosPiercingsCella();'>Cella</span>";
textPiercingFotos['Español'] = "texto español";
textPiercingFotos['English'] = "english text";

Asi SI funciona:

Código:

var textPiercingFotos = [];
textPiercingFotos['Català'] = "Cella";
textPiercingFotos['Español'] = "texto español";
textPiercingFotos['English'] = "english text";

Y esta es la comparacion...

Código:

if(contingutApartatCentral == textPiercingFotos['Català'] || contingutApartatCentral == textPiercingFotos['Español'] || contingutApartatCentral == textPiercingFotos['English'])
	{
		document.getElementById("textCentral").innerHTML = textPiercingFotos[idioma];
	}

Haver si alguien puede ayudarme, que no doy con el problema...

Muchas gracias!!! :)

#2 (**permalink**) 11/04/2009, 10:15

Es lógico que no funcione. "Texto" no es lo mismo que "Texto", ¿no?

Dependerá del contenido que tengas la comparación que hagas. Probablemente lo que necesitas no es comparar directamente sino buscar si una de las cadenas está dentro de la otra. Algo de tipo if("Texto".indexOf("Texto") != -1) { ... } o similar.

Rizz · #3 (**permalink**) 11/04/2009, 18:01

Pero io no comparo el value, sino el innerHTML (o sea, el codigo).

Con un Texto si que me lo compara correctamente, el problema viene al poner una funcion javascript (como por ejemplo, onclick="mi_funcion();").

Haver si podeis aclararme porque da el error.

Gracias :)

Panino5001 · #4 (**permalink**) 11/04/2009, 19:01

Yo creo que tiene razón venkman. De todas maneras, podrías verificar con indexOf si la cadena buscada se encuentra dentro de la otra:

Código:

if(cadena.indexOf(cadenaBuscada.toString())!=-1){...

Rizz · #5 (**permalink**) 11/04/2009, 19:59

Ok, voy a probar como me decis seguro que va a funcionar, pero de todas maneras... Sigo sin entender porque no funciona esta comparacion...

Mirad, os pongo aqui un ejemplo más claro, para que veais a que me refiero:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">

var texto1 = [];
texto1['English'] = "<span>English text1</span>";
texto1['Español'] = "<span>Texto1 en Español</span>";

var texto2 = [];
texto2['English'] = "<span onclick='alertEnOnclick();'>English text2</span>";
texto2['Español'] = "<span onclick='alertEnOnclick();'>Texto2 en Español</span>";


function cambiarIdioma()
{
	var idioma = document.getElementById('idioma').value;
	var codigoHtmlDiv = document.getElementById('divTexto').innerHTML;
	
	
	if (codigoHtmlDiv == texto1['English'] || codigoHtmlDiv == texto1['Español'])
	{
		document.getElementById('divTexto').innerHTML = texto1[idioma];	
	}
	else if (codigoHtmlDiv == texto2['English'] || codigoHtmlDiv == texto2['Español'])
	{
		document.getElementById('divTexto').innerHTML = texto2[idioma];
	}
}

function fTexto1()
{
	var idioma = document.getElementById('idioma').value;
	document.getElementById('divTexto').innerHTML = texto1[idioma];
}

function fTexto2()
{
	var idioma = document.getElementById('idioma').value;
	document.getElementById('divTexto').innerHTML = texto2[idioma];
}

function alertEnOnclick()
{
	alert('esto es de prueba solo');
}
</script>
</head>

<body onload="cambiarIdioma();">
<p>
<select name="idioma" id="idioma" onchange="cambiarIdioma();">
  <option value="English">English</option>
  <option value="Español">Español</option>
</select>
<span onclick="fTexto1();">Texto1</span>
<span onclick="fTexto2();">Texto2</span>
</p>
<p>
<div id="divTexto"></div>
</p>
</body>
</html>

Si probais este codigo, vereis que el el texto2 no cambia de idioma, mientras que el texto1 si que lo hace, haciendo exactamente la misma comparacion, pero añadiendo el onclick en los spans dentro del array del texto2.

Haver si podeis aclararme de que ser trata...

Gracias de antemano :)

Panino5001 · #6 (**permalink**) 11/04/2009, 21:04

Lo que no estás teniendo en cuenta es que los navegadores no interpretan el innerHTML de la misma manera en que parece escrito.
Esto, por ejemplo:

Código:

<!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></title>
<script>
onload=function(){alert(document.body.innerHTML)}
</script>
</head>

<body>
<div style="color:red;cursor:pointer" onclick="alert(123)">ejemplo</div>
</body>
</html>

En Firefox se muestra tal cual está escrito. En explorer, algunos atributos y los tags aparecen en mayúscula, algunas comillas se eliminan, etc.
Es por eso que no podés confiar en ese if.

Rizz · #7 (**permalink**) 11/04/2009, 21:17

Eso era lo que buscaba. Poniendo un alert en el codigo, he visto que el firefox, al poner, por ejemplo, un onclick='funcion();' dentro del innerHTML. Transforma la primera comilla simple, a comilla doble... Por lo que quedaria como onclick="funcion();'

Para solventar el problema solo hace falta ponerlo así: onclick=\"funcion();\"

De todas maneras, si cada navegador interpreta el innerHTML a su manera, la comparacion no es valida... I requiero usar el una funcion para buscar el texto, tal como deciais.

Muchas gracias por la ayuda!! :)