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>