1

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.

0

2 respuestas 2

2

Hay varias soluciones como modificar el texto del textNode en vez de reemplazarlo, quitar el textNode antes de añadir otro... un sistema simple seria limpiar el contenido de tdcheckbox, algo parecido a esto:

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");

tdCheckbox.innerHTML=""; // Limpia el contenido.

if(checkbox.checked){
    tdCheckbox.appendChild(parrafo).style.color= 'green';
    parrafo.appendChild(activo);    
}
else
    {

    tdCheckbox.appendChild(parrafo).style.color= 'red';
    parrafo.appendChild(inactivo);
  }
}
<input type=checkbox id=estadoServicio onclick=textoEstado()>
<div id=tdCheckbox></div>

Pero modificar el innerHTML directamente dicen que no es muy "optimo", pero es lo mas fácil.
Si no te gusta modificar directamente los innerHTML puedes modificar el textNode.

function textoEstado(){
var checkbox= document.getElementById("estadoServicio");
var tdCheckbox= document.getElementById("tdCheckbox");
if (!tdCheckbox.childNodes[0]) tdCheckbox.appendChild(document.createTextNode(""));

if(checkbox.checked){
	tdCheckbox.childNodes[0].nodeValue="Activo";
    tdCheckbox.style.color= 'green';
}
else
    {
	tdCheckbox.childNodes[0].nodeValue="Inactivo";
    tdCheckbox.style.color= 'red';
	}
}
<input type=checkbox id=estadoServicio onclick=textoEstado()>
<div id=tdCheckbox></div>

Y para finalizar, como el título de la pregunta es sobre cambiar un elemento, una solución reemplazando el hijo.

function textoEstado(){
var checkbox= document.getElementById("estadoServicio");
var tdCheckbox= document.getElementById("tdCheckbox");
if (!tdCheckbox.childNodes[0]) tdCheckbox.appendChild(document.createTextNode(""));

if(checkbox.checked){
	tdCheckbox.replaceChild(document.createTextNode("Activo"),tdCheckbox.childNodes[0]);
    tdCheckbox.style.color= 'green';
}
else {
    tdCheckbox.replaceChild(document.createTextNode("Inactivo"),tdCheckbox.childNodes[0]);
    tdCheckbox.style.color= 'red';
	}
}
<input type=checkbox id=estadoServicio onclick=textoEstado()>
<div id=tdCheckbox></div>

1

Intenta utilizando tdCheckbox.innerHTML es mas sencillo y mas fácil de leer.

if (checkbox.checked) {
  tdCheckbox.innerHTML = '<p style="color: green">Activo</p>';
} else {
  tdCheckbox.innerHTML = '<p style="color: red">Inactivo</p>';
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.