problemilla muy básico con el DOM

spect · #1 (**permalink**) 27/01/2014, 18:35

Estoy empezando con javascript y el manejo del DOM
Estoy creando como ejemplo una Version del boton me gusta del Facebook leyendo el valor de un elemento y sustituyendolo por otro.
El caso es que el script solo me funciona la primera vez que lo ejecuto.

¿me podrían decir que estoy haciendo mal?

muchas gracias

Código Javascript:

Ver original<!DOCTYPE html>
 
<html>
 
<title>Ejemplo Me Gusta</title>
<meta charset="UTF-8" />
 
<script type="text/javascript">
 
function sumamegusta() {
 
//Leemos el texto del elemento con id=num_megusta
var MegustaAnterior = document.getElementById("num_megusta").firstChild.data;
 
//Sumamos 1 al valor leído
var NuevoMegusta = parseInt(MegustaAnterior) + 1 ;
 
//AJAX: Sumamos 1 nuevo MeGusta a la BBDD
 
 
//Leemos el elemento antiguo que queremos reemplazar
var viejo = document.getElementById("num_megusta");
 
//Accedemos a su elemento padre mediante la propiedad parentNode
var padre = viejo.parentNode
 
//Creamos un nuevo elemento span para reemplazar
var nuevoElemento = document.createElement("span");
 
//Asignamos el id=num_megusta al nuevo elemento
nuevoElemento.id = "num_megusta";
 
//creamos un elemento tipo texto
var nuevoTexto = document.createTextNode(NuevoMegusta);
 
//Asignamos el elemento tipo texto al elemento span
var nuevo = nuevoElemento.appendChild(nuevoTexto);
 
//Reemplazamos con replaceChild, Entre paréntesis pondremos en primer lugar el elemento nuevo que lo sustituira, y en segundo el elemento viejo:
padre.replaceChild(nuevo,viejo)
 
 
}
</script>
 
</head>
 
<body>
 
<div id="megusta">Esta página le gusta a <span id="num_megusta">12</span> Personas</div>
<div id="like"><a id="boton_like" href="#" onclick="sumamegusta();">Me gusta</a></div>
 
 
 
</body>
</html>

Alexis88 · #2 (**permalink**) 27/01/2014, 20:22

Creo que tu función es muy grande para algo que puedes hacerlo así:

Código Javascript:

Ver originalfunction sumamegusta() {
    var MegustaAnterior = document.getElementById("num_megusta");
    MegustaAnterior.innerHTML = Number(MegustaAnterior.innerHTML) + 1;
}

No hay necesidad de crear un nuevo Span, basta con que tomes el contenido del actual, lo conviertas a formato numérico, le sumes 1 y asignes ese resultado al contenido del Span.

Saludos

spect · #3 (**permalink**) 28/01/2014, 04:28

Cita:

Iniciado por Alexis88

Creo que tu función es muy grande para algo que puedes hacerlo así:

Código Javascript:

Ver originalfunction sumamegusta() {
    var MegustaAnterior = document.getElementById("num_megusta");
    MegustaAnterior.innerHTML = Number(MegustaAnterior.innerHTML) + 1;
}

No hay necesidad de crear un nuevo Span, basta con que tomes el contenido del actual, lo conviertas a formato numérico, le sumes 1 y asignes ese resultado al contenido del Span.

Saludos

Si, ya lo sé, tengo las dos versiones esta, y la del innerHTML
pero quería saber como se hace con el replaceChild
es por aprender.

Alexis88 · #4 (**permalink**) 28/01/2014, 08:57

Estás reemplazando bien el Span, el problema es que, por alguna razón (no la sé), las funciones no afectan a los elementos que reemplazan a elementos antiguos, pero como verás, para este caso no es necesario hacerlo.

Saludos