[SOLUCIONADO] cambiar estilo con java

pvsge · #1 (**permalink**) 25/02/2015, 04:24

Hola a todo el foro. Soy bastante nuevo en estas batallas con la programacion, asi que soy un poco ignorante. He buscado ya en el foro alguna ayuda de hilos anteriores pero no he encontrado una solucion aplicable a mi caso.

Estoy intentando cambiar una parte del estilo css con el DOM

getElementByClassName

pero no se exactamente cual es la sintaxis correcta para hacer esto. Este es el codigo.

<!DOCTYPE HTML>
<html>
<head>
<title>Cuento verbos a1</title>
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="../../hsejer.css">
<style type="text/css">
.inp {
background-color: #E9E9E9;
border: 2px solid #A8A8A8;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='verbos.html'>Mas ejercicios</a></li>
<li><a href='../primero.html'>Menu principal</a></li>
<li></li>
</ul>
</nav>
<div>
<h2><center><ins>ESTAR</ins></ceter></h2>

<h3>Yo<input type="text"id="1s" class="inp" title="r1"></h3>
<h3>Tu<input type="text"id="2s" class="inp" title="r2"></h3>
<h3>El/ella/ello<input type="text"id="3s" class="inp" title="r3"></h3>
<h3>Nosotros<input type="text"id="1p" class="inp" title="r4"></h3>
<h3>Vosotros<input type="text"id="2p" class="inp" title="r5"></h3>
<h3>Ellos<input type="text"id="3p" class="inp" title="r6"></h3>

</div>
<input type="button" onClick="javascript:colores();comprobar()" value= "boton input">
<script type = "text/javascript">
function comprobar(){
var n1 = document.getElementById("1s").value;
var n2 = document.getElementById("2s").value;
var n3 = document.getElementById("3s").value;
var n4 = document.getElementById("1p").value;
var n5 = document.getElementById("2p").value;
var n6 = document.getElementById("3p").value;

if (n1 == "estoy")
{n1 = (1)}
else {n1 = (0)}
if (n2 == "estas")
{n2 = (1)}
else {n2 = (0)}
if (n3 == "esta")
{n3 = (1)}
else {n3 = (0)}
if (n4 == "estamos")
{n4 = (1)}
else {n4 = (0)}
if (n5 == "estais")
{n5 = (1)}
else {n5 = (0)}
if (n6 == "estan")
{n6 = (1)}
else {n6 = (0)}

alert((Math.round(((n1+n2+n3+n4+n5+n6)/6)*100))+"% Correcto")
}
function colores(){
var cambio = document.getElementByClassName('inp').style.backgr ound-color: '#B4DD53';
</script>
</body>
</html>

El problema lo tengo en la linea de:
var cambio = document.getElementByClassName('inp').style.backgr ound-color: '#B4DD53';

Muchas gracias de antemano.

GeekGirl · #2 (**permalink**) 25/02/2015, 06:34

Tu código tiene muchos inconvenientes. Primero que nada está la maquetación HTML. Por qué ponés los inputs dentro de tags <h3>? Si lo que querés es cambiar el tamaño del texto, para eso tenés CSS.
Las etiqueta <center> está en desuso y fijate que una de ellas está mal cerrada (dice ceter).

En cuanto al javascript, así como está no va a funcionar nunca. Fijate que la función colores ni siquiera está cerrada. Además estás llamando mal a la propiedad background-color. La correcta sintaxis es usando camel case backgroundColor y un = en lugar de los dos puntos.

De todas formas, getElementsByClassName() no es estándar, y no te va a funcionar en todos los navegadores. Para solucionar este inconveniente, lo que hago es levantar por tag y luego sí, preguntar por el className. Esto funciona en todos los navegadores y hace lo mismo que la otra función. Fijate:

Código HTML:

<nav>
  <ul>
    <li><a href='verbos.html'>Mas ejercicios</a></li>
    <li><a href='../primero.html'>Menu principal</a></li>
    <li></li>
  </ul>
</nav>
<div>
  <h2><center><ins>ESTAR</ins></center></h2>
  <h3>Yo<input type="text"id="1s" class="inp" title="r1" /></h3>
  <h3>Tu<input type="text"id="2s" class="inp" title="r2" /></h3>
  <h3>El/ella/ello<input type="text" id="3s" class="inp" title="r3" /></h3>
  <h3>Nosotros<input type="text" id="1p" class="inp" title="r4" /></h3>
  <h3>Vosotros<input type="text" id="2p" class="inp" title="r5" /></h3>
  <h3>Ellos<input type="text" id="3p" class="inp" title="r6" /></h3>
</div>
<input type="button" onClick="javascript:comprobar(); colores();" value="boton input" />

<script type = "text/javascript">
function comprobar(){
  var n1 = document.getElementById("1s").value;
  var n2 = document.getElementById("2s").value;
  var n3 = document.getElementById("3s").value;
  var n4 = document.getElementById("1p").value;
  var n5 = document.getElementById("2p").value;
  var n6 = document.getElementById("3p").value;

  if (n1 == "estoy") {
    n1 = (1)
  } else {
    n1 = (0)
  }
  
  if (n2 == "estas") {
    n2 = (1)
  } else {
    n2 = (0)
  }

  if (n3 == "esta") {
    n3 = (1)
  } else {
    n3 = (0)
  }
  
  if (n4 == "estamos") {
    n4 = (1)
  } else {
    n4 = (0)
  }
  
  if (n5 == "estais") {
    n5 = (1)
  } else {
    n5 = (0)
  }
  
  if (n6 == "estan") {
    n6 = (1)
  } else {
    n6 = (0)
  }

  alert((Math.round(((n1+n2+n3+n4+n5+n6)/6)*100))+"% Correcto");
}

function colores(){
  var inputsCambio = document.getElementsByTagName("input");

  for (var a = 0; a < inputsCambio.length; a++) {
    if (inputsCambio[a].className == 'inp') {
      inputsCambio[a].style.backgroundColor = '#B4DD53';
    }
  }
}
</script>

Un consejo: tabula el código js como corresponde. Es muy incómodo de leer así. Y otro consejo, podés ahorrarte muchas líneas de este código usando operadores ternarios en lugar de los if else. Por ejemplo en lugar de hacer:

Código Javascript:

Ver originalif (n1 == "estoy") {
  n1 = (1)
} else {
  n1 = (0)
}

Simplemente podés hacer:

Código Javascript:

Ver originaln1 = (n1 == "estoy") ? 1 : 0;

Saludos :)