Problema con switch

GameAndWatch · #1 (**permalink**) 04/11/2011, 11:36

¡Hola!Soy nuevo(muy) en esto de javascript,y estoy intentando hacer un pequeño script que cambie el texto con innerHTML.Sin la estructura swicth lo he conseguido,pero al montar un pequeño switch ni lo hace bien ni da error.El código es este:
<script type="text/javascript">
function carita(){
var x= document.getElementById('cara').textContent;
switch(x){
case ':-(':
document.getElementById('cara').innerHTML=":-)";
alert("triste");
break;
case ':-)':
document.getElementById('cara').innerHTML=":-(";
alert("Feliz");
break;
}
//Alert para saber que tiene el valor x
alert(x);
}
</script>

Y en el HTML,este es el div:

<div id="cuerpo" onclick="carita()">
<h1>Esto es una prueba con js</h1>
<div id="cara"> :-)</div>
<br />
</div>

Estoy seguro que el error es muy peuqeño,pero no sé arreglarlo...¿que puede estar mal?
Gracias de antemano por la respuesta.

Raziel_Ravenheart · #2 (**permalink**) 04/11/2011, 11:46

Tu problema va a ser que estás confiando en lo primero que lees en internet, y no te das cuenta que hay ciertas reglas.

Otro error, es que seguro vas a estar haciendo esto con Internet Explorer versión 8 y anteriores, el cual no reconoce el atributo, textContent. (Mínimo tienes windows XP)

Código Javascript:

Ver originalvar x= document.getElementById('cara').textContent;

Y por lo tanto el alert sale con un "undefined". Ten en cuenta que Internet Explorer, tiene ciertas diferencias en como manipula algunos atributos, métodos, clases y eventos, entonces documentate bien antes de utilizarlos, ya que entre productores de navegadores, microsoft siempre ha sido rebelde, al no quere seguir al pié de la letra los estándares web.

Si pruebas tu código como está en firefox o chrome, fijo te corre bien. De todos modos es mejor que cambies el textContent por innerHTML, que tmbn funciona.

Aunque tu código es básico, me gustó es divertido y parece que tienes idea de lo que quieres.

Sigue así.

Cualquier otra duda no dudes en preguntar.

Exitos

GameAndWatch · #3 (**permalink**) 04/11/2011, 12:25

¡Gracias por responder tan rápido!
El código lo estoy probando con firefox versión 7,porque Internet explorer como no lo uso...no me importa mucho si funciona o no(porque como esto es una fase de "pruebas"...).
Estoy probando con textContent para saber lo que tiene el div(y así poderlo cambiar por la otra carita)...porque probé con .text o .value y ahí si que me ponía undefined,pero es que así me muestra la carita sonriente...pero no cambia a la otra carita...me da la impresión de que no pasa por el switch,pero no sé porque...además,el firebug no me deja poner una pausa...
¿alguna idea de porque falla?

Raziel_Ravenheart · #4 (**permalink**) 04/11/2011, 14:39

Lo unico en que puedo pensar es que el error está en algun otro lado, y no en el código que muestras. También lo unico que se me ocurre es pasarte todo el código que estoy utilizando para que lo revises, aquí tienes:

Código HTML:

Ver original<html>
    <head>
        <title> Reto - 5 </title>
            
        <script type="text/javascript">
        function carita(){
            var x = document.getElementById('cara').textContent;
            switch(x){
                case ':(':
                    document.getElementById('cara').innerHTML = ":)";
                    alert("triste");
                    break;
                case ':)':
                    document.getElementById('cara').innerHTML = ":(";
                    alert("Feliz");
                    break;
            }
 
            alert(x);
        }
        </script>
 
    </head>
    
    <body>
    <div id="cuerpo" onclick="carita()">
    <h1>Esto es una prueba con js</h1>
    <div id="cara">:(</div>
    <br />
    </div>
    </body>
</html>

Pero antes de irlo a probar ten en cuenta que te lo paso con la propiedad "textContent", ya que la estas utilizando, en internet explorer creo que se usa es "innerText", y a diferencia de innerHTML, que funciona en todos, estos dos no devuelven otras etiquetas HTML, solo el texto. Yo generalmente me decanto por utilizar innerHTML, cuando estoy seguro de que solo es texto, pero en tu caso es posible que no sea así y tengas que tener cuidado.

De todos modos, como te dije el código me pareció divertido... te dejo como yo hice el mio, copialo, pégalo en un nuevo archivo, pruebalo y si te funciona compáralo con el que tienes a ver si encuentras el problema en el tuyo

Saludos

GameAndWatch · #5 (**permalink**) 05/11/2011, 09:03

¡Gracias!¡Ya encontré el error!
Estuv mirando tu codigo y al final me dí cuenta de que era...fallaba porque delante tenía un espacio en blanco.
Muchas gracias Raziel_Ravenheart por tu ayuda.