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 :)