Skip to main content
2 de 2
Improved Formatting
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Cambiar un elemento texto del DOM por otro mediante Javascript

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.

berlot83
  • 646
  • 2
  • 10
  • 25