asi tengo la tabla , obviamnate con 2 TR adicionales mas con las clases correspondiente
codigo tabla
<table class="table1"> <tr> <th>Color</th> <th>Forma</th> </tr> <tr> <td> <input type="radio" name="color" onclick="cambiarRojo()" id="rojo" />Rojo </td> <td> <input type="radio" name="figura" onclick="figura_cruz();" />Cruz </td> </tr> <tr> <td> <input type="radio" name="color" onclick="cambiarAmarillo()" id="amarillo" />Amarillo </td> <td> <input type="radio" name="figura" onclick="figura_cuadrado();" />Cuadrado </td> </tr> <tr> <td> <input type="radio" name="color" onclick="cambiarVerde()" id="verde" />Verde </td> <td> <input type="radio" name="figura" onclick="figura_triangulo();" />Triangulo </td> </tr>
js
este código estoy usando , lo que quiero es que al seleccionar la figura, que los cuadros de las clases seleccionada desaparezcan , lo realiza pero no los cuadros que quiero
let clases = ['cuadrob', 'cuadroc', 'cuadrod',
'cuadrof','cuadroh','cuadroj','cuadrok','cuadrol','cuadron','cuadroo',
'cuadrop','cuadror','cuadrot','cuadrov','cuadrow', 'cuadrox'];
function figura_cruz(){
for(let clasesCruz of clases){
var cruz = document.getElementsByClassName(clasesCruz);
for(var i=0; i<cruz.length; i++){
if(cruz[i].style.visibility = "hidden"){
cruz[i].style.display = "block";
}else{
cruz[i].style.visibility = "hidden";
}
}
}
}
js cambio color esta es una de la function que realize para el cambio de color rojo, amarillo y verde
function cambiarRojo() { var Filas = document.getElementsByClassName("clase"); [].forEach.call(Filas, function (rojo) { rojo.style.backgroundColor = "red"; }); }