Tengo un checkbox que cuando lo dejo checked quiero que diga Activo en verde, y cuando lo dejo desbloqueado quiero que diga inactivo, el tema es así, por javascript hice que cuando se checkea diga en verde activo, y cuando se descheckea diga inactivo, mi problema es que cada vez que deschequea me crea un elemento nuevo, he intentado con removeChild y replaceChild y no logro hacer que desaparezca el texto activo y aparezca el inactivo.
Este es el código base:
function textoEstado() {
var checkbox = document.getElementById("estadoServicio");
var parrafo = document.createElement("p");
var tdCheckbox = document.getElementById("tdCheckbox");
var activo = document.createTextNode("Activo");
var inactivo = document.createTextNode("Inactivo");
if (checkbox.checked) {
tdCheckbox.appendChild(parrafo).style.color = 'green';
parrafo.appendChild(activo);
} else {
tdCheckbox.appendChild(parrafo).style.color = 'red';
parrafo.appendChild(inactivo);
}
}
Este es el código con unos intentos por hacer desaparecer el texto activo y que aparezca el inactivo sin que se la pase creando elementos:
//TODO removeChild activo inactivo
function textoEstado() {
var checkbox = document.getElementById("estadoServicio");
var parrafo = document.createElement("p");
var parrafo1 = document.createElement("p");
var tdCheckbox = document.getElementById("tdCheckbox");
var activo = document.createTextNode("Activo");
var inactivo = document.createTextNode("Inactivo");
if (checkbox.checked) {
tdCheckbox.appendChild(parrafo).style.color = 'green';
parrafo.appendChild(activo);
} else {
parrafo.removeChild(parrafo.childNodes[0]);
tdCheckbox.appendChild(parrafo1).style.color = 'red';
parrafo1.appendChild(inactivo);
}
}
Tambien intente este otro y no va:
//TODO removeChild activo inactivo
function textoEstado() {
var checkbox = document.getElementById("estadoServicio");
var parrafo = document.createElement("p");
var tdCheckbox = document.getElementById("tdCheckbox");
var activo = document.createTextNode("Activo");
var inactivo = document.createTextNode("Inactivo");
if (checkbox.checked) {
tdCheckbox.appendChild(parrafo).style.color = 'green';
parrafo.appendChild(activo);
} else {
parrafo.removeChild(parrafo.childNodes[0]);
tdCheckbox.appendChild(parrafo).style.color = 'red';
parrafo.appendChild(inactivo);
}
}
Ninguno de los dos me funciona, si sigo así le voy a tener que poner un alert, pero realmente sería un camino muy fácil ése, gracias por la atención.