Change one text element of the DOM for another using Javascript

Question

Change one text element of the DOM for another using Javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have a checkbox that when I leave it checked I want it to say Active in green, and when I leave it unlocked I want it to say inactive, the topic is like this, by javascript I did that when checked it says in active green, and when it is unchecked it says inactive, my problem is that every time I uncheck creates a new element, I tried with removeChild and replaceChild and I can not make the active text disappear and the inactive one appears.

This is the base code:

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

This is the code with some attempts to make the active text disappear and the inactive one appear without you passing it creating elements:

//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);
  }
}

Also try this other one and it does not go:

//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);
  }
}

Neither of them works for me, if I continue like this I'll have to put an alert, but it would really be a very easy way, thanks for the attention.

javascript

asked by berlot83 15.04.2017 в 15:16

source

2 answers

1

Try using tdCheckbox.innerHTML is easier and easier to read.

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

answered by 15.04.2017 в 15:34

can I load a function js in bodybody? Syntax problem of the SQL statement in Visual Studio C #, with Access

score 2 · Accepted Answer

There are several solutions such as modifying the text textNode instead of replacing it, removing the textNode before adding another ... a simple system would be to clean the contents of tdcheckbox, something similar to this:

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>

But modifying the innerHTML directly says that it is not very "optimal", but it is the easiest.
If you do not like to directly modify the innerHTML you can modify the 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>

And finally, as the title of the question is about changing an element, a solution replacing the child.

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>