Cambiar texto alternativamente de un <span>

gmonterog · #1 (**permalink**) 08/06/2012, 03:36

Hola, no se nada de JavaScript (tengo nociones de Java) y tengo un problema con una función sencilla que no me funciona.

En mi HTML tengo un <span> cuyo texto es ver más [...] y quiero cambiarlo de forma alternativa con ocultar [...] al pulsar sobre el mismo. Dicho <span> tiene un controlador de evento onmousedown="mostrarocultar('depresion1')" (ya os imafgináis lo que hace esta función) y otro onclick="cambiaretiqueta1()". Este último es el que no me funciona.

Este es mi código:

Código:

 <script type="text/javascript">
 function cambiaretiqueta1(){
  if (this.innerHTML=='ver más [...]') {   /*si el texto del span es 'ver más [...]'*/
	this.innerHTML='ocultar [...]';     /*entonces se cambia dicho texto a ocultar [...]*/
  }
  else{
	this.innerHTML='ver más [...]';     /*en caso contrario se cambia nuevamente a ver más [...]*/
  }
 }/*fin de cambiaretiqueta1*/
 </script>

Me sabéis decir por que no funciona.

Gracias a todos.

Un Saludo,

GMG.

YYs86 · #2 (**permalink**) 08/06/2012, 03:55

Si no te importa usar JQuery la opción es bastante sencilla.

Código Javascript:

Ver original<span class="seemore" onlick="cambiarstatus()">Leer mas...</span>
 
function cambiarstatus(){
 
if($('.capaoculta:hidden')){
 
$('.seemore').html('');
$('.seemore').html('Ocultar...');
$('.capaoculta').show();
 
}else{
 
$('.seemore').html('');
$('.seemore').html('Leer mas...');
$('.capaoculta').hide();
 
}
 
}

gmonterog · #3 (**permalink**) 08/06/2012, 04:58

Bueno, la verdad es que apenas estoy empezando a mirar algunas funciones (por necesidad, más que nada) de JavaScript.

Preferiría una solución sin usar bibliotecas, por eso de no meterme en demasiados asuntos al mismo tiempo. Una vez entienda bien la base de JavaScript, entonces, me meteré a ver otras herramientas.

Gracias por la respuesta en cualquier caso.

Si alguien sabe con JS sin usar biblios le agradeceré mucho su ayuda.

Saludos,

GMG.

furoya · #4 (**permalink**) 08/06/2012, 13:12

Sólo porque no escribiste "librería"

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
function cambiaretiqueta1(T){
  if (T.innerHTML=='ver más [...]') {  
	T.innerHTML='ocultar [...]';  
  }
  else{
	T.innerHTML='ver más [...]'; 
  }
 }
 
</script>
<style type="text/css">

</style>
</head>
<body>
<span onclick="cambiaretiqueta1(this)" 
style="cursor:pointer; background:yellow">ver más [...]</span>
</body>
</html>

emprear · #5 (**permalink**) 08/06/2012, 13:30

@gmonterog

Viendo en conjunto tu idea, tal vez te interese esto

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Mostrar ocultar capas cambiando valor del texto</title>
<meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
<style type="text/css">
/*<![CDATA[*/
#oculta1,#oculta2 {
display: none;
width: 180px;
font-family: arial, serif;
padding: 15px 5px;
border: dotted 1px #554F9D;
background-color:#A3AD76;
font-size: 10pt;
margin-top: 3px;
margin-bottom:20px;
}
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
}
.oculta1, .oculta2{
display: inline-block;
width: 100%;
height: 100%;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* Configurar */
var tn = "Ocultar"; // Texto para cuando la capa esté visible
var tb = "Mostrar"; // Texto para cuando la capa esté oculta
/* No Editar */
var tags_span = new Array();
function cTxt(laclase,eltexto,propiedad) {
var tags_span=document.getElementsByTagName('span');
for (i=0; i<tags_span.length; i++) {
if (tags_span[i].className==laclase) {
var texto = eltexto;
tags_span[i].innerHTML= texto;
}
}
document.getElementById(laclase).style.display = propiedad;
}
 
function m_o(cdv) {
var e = document.getElementById(cdv);
e.style.display =(e.style.display=="block")?cTxt(cdv,tb,'none'):cTxt(cdv,tn,'block');
}
//]]>
</script>
</head>
<body>
<p><span class="oculta1" onclick="m_o('oculta1');">Mostrar</span></p>
<div id="oculta1">
Christus eum filiam sum cum suam non coepit, mytilenam cuius ampullam ungues dotis quare quae vero non coepit
</div>
<p><span class="oculta2" onclick="m_o('oculta2');">Mostrar</span></p>
<div id="oculta2">
Lorem ipsum dolor sit amet, jesu Dionysiadem tuos ratio indue villicus potest in fuerat
</div>
</body>
</html>

Si lo analizás no es dificil de ver su funcionamiento

Saludos

gmonterog · #6 (**permalink**) 08/06/2012, 14:20

Entiendo furoya. Así que el "this" hay que pasarlo como parámetro desde el controlador de evento. Está claro. Lo pruebo y te digo que tal.

Gracias otra vez por tu sabiduría.

Un saludo,

GMG.

Cita:

Iniciado por furoya

Sólo porque no escribiste "librería"

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
function cambiaretiqueta1(T){
  if (T.innerHTML=='ver más [...]') {  
	T.innerHTML='ocultar [...]';  
  }
  else{
	T.innerHTML='ver más [...]'; 
  }
 }
 
</script>
<style type="text/css">

</style>
</head>
<body>
<span onclick="cambiaretiqueta1(this)" 
style="cursor:pointer; background:yellow">ver más [...]</span>
</body>
</html>

gmonterog · #7 (**permalink**) 08/06/2012, 14:31

Hola emprear:

Tiene buena pinta, pero me costará un poco más analizarlo. El tema de los arrays no lo domino mucho. Haré un esfuerzo por entenderlo y seguro que me ayudará a aprender algo más.

Gracias otra vez.

GMG.

Cita:

Iniciado por emprear

@gmonterog

Viendo en conjunto tu idea, tal vez te interese esto

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Mostrar ocultar capas cambiando valor del texto</title>
<meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
<style type="text/css">
/*<![CDATA[*/
#oculta1,#oculta2 {
display: none;
width: 180px;
font-family: arial, serif;
padding: 15px 5px;
border: dotted 1px #554F9D;
background-color:#A3AD76;
font-size: 10pt;
margin-top: 3px;
margin-bottom:20px;
}
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
}
.oculta1, .oculta2{
display: inline-block;
width: 100%;
height: 100%;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* Configurar */
var tn = "Ocultar"; // Texto para cuando la capa esté visible
var tb = "Mostrar"; // Texto para cuando la capa esté oculta
/* No Editar */
var tags_span = new Array();
function cTxt(laclase,eltexto,propiedad) {
var tags_span=document.getElementsByTagName('span');
for (i=0; i<tags_span.length; i++) {
if (tags_span[i].className==laclase) {
var texto = eltexto;
tags_span[i].innerHTML= texto;
}
}
document.getElementById(laclase).style.display = propiedad;
}
 
function m_o(cdv) {
var e = document.getElementById(cdv);
e.style.display =(e.style.display=="block")?cTxt(cdv,tb,'none'):cTxt(cdv,tn,'block');
}
//]]>
</script>
</head>
<body>
<p><span class="oculta1" onclick="m_o('oculta1');">Mostrar</span></p>
<div id="oculta1">
Christus eum filiam sum cum suam non coepit, mytilenam cuius ampullam ungues dotis quare quae vero non coepit
</div>
<p><span class="oculta2" onclick="m_o('oculta2');">Mostrar</span></p>
<div id="oculta2">
Lorem ipsum dolor sit amet, jesu Dionysiadem tuos ratio indue villicus potest in fuerat
</div>
</body>
</html>

Si lo analizás no es dificil de ver su funcionamiento

Saludos

gmonterog · #8 (**permalink**) 08/06/2012, 15:06

Perfecto como explicó furoya. Funciona a las mil maravillas así que caso cerrado.

Saludos,

GMG.