How to change the value appearing in rows without deleting the previous content in javascript?

Navigation
1

I have a series of buttons with a class called botonesSistema

I would like that when executing any function, they will change their class to another call EstadoSistemaEncendido .

Try as follows: 

var elements = document.getElementsByClassName("botonesSistema");
    for (var i = 0, len = elements.length; i < len; i++) {
        elements[i].className = "estadoSistemaEncendido";
    }

It happens that it only changes the class of the buttons in odd positions, there are 10 buttons and only the botoens: 1, 3, 5, 7, 9 turn green (effect of the class).

Often this error occurs in the console: 

Cannot set property 'className' of undefined

And pressing again changes the class of the others.

With the above the buttons would handle two events, change color when pressed and also say the name of your id: 

var elements = document.getElementsByClassName("botonesSistema");

    for (var i = 0, len = elements.length; i < len; i++) {
     elements[i].classList.add("estadoSistemaEncendido");
      elements[i].addEventListener("click",function(){
        this.classList.toggle(".estadoSistemaApagado");
    });
    } 

    for (var i = 0, len = elements.length; i < len; i++) {
        elements[i].onclick = function() {
            var id = this.id.replace("es", "");
            var mayus = id.charAt(0).toUpperCase();
            var resto = id.slice(1);
            var completo = mayus + resto;
            var mensaje = "[Sistema: " + completo + "]";
            alert(mensaje);
        }
    }

I add the CSS used and the HTML buttons: 

.botonesSistema{
}

.botonesAparato{
}

.estadoSistemaApagado {
    background-color: #f44336;

}

.estadoSistemaEncendido {
    background-color: #4CAF50;
}

HTML: 

<input type="button" id="1Accion" class="botonesSistema">
<input type="button" id="2OtraAccion" class="botonesSistema">
    
asked by Victor Alvarado 23.05.2017 в 21:19
source

2 answers

4

An option to manipulate the classes of an element is to use the property classList to add , delete , toggle and check if an element contains a certain class. 

elemento.classList.remove("miclase"); /* Eliminar*/
elemento.classList.add("miclase"); /* Agregar*/
elemento.classList.toggle("miclase"); /* Toggle*/
elemento.classList.contains("miclase") /* Verificar si contiene la clase*/

For your example it would be. 

var elements = document.getElementsByClassName("botonesSistema");
for (var i = 0, len = elements.length; i < len; i++) {
     elements[i].classList.add("estadoSistemaEncendido");
      elements[i].addEventListener("click",function(){
        this.classList.toggle("otraclase");
    });
} 
.estadoSistemaEncendido{
    background: red;
}
.otraclase{
  background:blue;
}
<input type="button" class="botonesSistema">
<input type="button" class="botonesSistema">
<input type="button"  class="botonesSistema">
<input type="button"  class="botonesSistema">
  

You can also check this Reply

    
answered by 23.05.2017 / 21:39
source
2

You could use the querySelectorAll() method used in previous questions along with the toggle() method of the classList property. With this you can create a function that when you press one of the buttons you get an effect where the color of the button changes, for example: from red to green and vice versa .

Example: 

var el = document.querySelectorAll(".botonesSistema");
el.forEach(function(e){
 e.onclick = function(){
  this.classList.toggle("Encendido");
 };
});
.botonesSistema {
 color:red;
}
.botonesSistema.Encendido {
 color:green;
}
<button class="botonesSistema">boton 1</button>
<button class="botonesSistema">boton 2</button>
<button class="botonesSistema">boton 3</button>
<button class="botonesSistema">boton 4</button>
    
answered by 23.05.2017 в 21:45
Length of an array in JavaScript error in iostream.h DEV C ++