Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/02/2015, 06:34
Avatar de GeekGirl
GeekGirl
 
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: cambiar estilo con java

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 original
  1. if (n1 == "estoy") {
  2.   n1 = (1)
  3. } else {
  4.   n1 = (0)
  5. }

Simplemente podés hacer:

Código Javascript:
Ver original
  1. n1 = (n1 == "estoy") ? 1 : 0;

Saludos :)