Hola a todos. Bueno, pues lo cierto es que empecé ayer con esto del javascript, concretamente esta mañana, y creo que estoy tratando de hacer algo demasiado complejo para mi nivel y no estoy teniendo buenos resultados, o al menos no tan buenos como yo me esperaba.
Estoy tratando de hacer una calculadora de stats en base a un videojuego para postearla en un foro. Ya había hecho antes páginas web (concretamente plantillas gratuitas) con HTML y CSS, pero es la primera vez que toco Javascript y quiero adentrarme más en todo esto. He estado leyendo bastantes manuales, pero aun así parece que se vea todo de forma bastante básica y cuando trato de anidar secuencias desde otros puntos todo se me viene abajo y no sale lo que yo busco.
He conseguido hacer funcionar códigos sencillos de esta forma como un document.write o cosas así, pero cuando se trata de sumar distintas opciones de un formulario.. nada.
La cosa es la siguiente, tengo tres páginas.
Una, es la que verán los usuarios al entrar y es donde está la calculadora. Ésta está formada por una serie de campos de formulario que los usuarios pueden editar a su antojo para dar unos números. Dependiendo de los números que den la web calculará y les dirá el resultado final.
Como segunda página tengo una página en la que incluyo la descripción del programa y en la que se mostrará el resultado del cálculo. Ésta está unida mediante un iframe a la página inicial, para poder ver el resultado sin salirme de esa página.
Por último tengo el archivo .js que es donde estoy haciendo los scripts de los cálculos. Lo tengo unido a la página inicial mediante el código.
Aquí pongo los códigos que estoy tratando de editar para obtener resultados:
Página inicial:
(Pongo parte del código, lo importante, me estoy saltanto aspectos como head y demás pero esos están incluidos, no creais que por no ponerlos no están xD)
Código HTML:
<script src="scripts/calc.js"></script>
</head>
<body text="#FFFFFF" bgcolor="#000000" style=" font-family:Georgia, 'Times New Roman', Times, serif;">
<div align="center"><img src="bannercalculadoras.png" width="498" height="117" />
<form method="post" action="ivcalculator.html" target="dvwindow" name="dvcalc" id="dvcalc">
<table width="75%" cellpadding="2" cellspacing="0" border="1" style="text-align: center;" class="calculator">
<tr>
<td class="headerstyle">Elige</td>
<td colspan="6">
<select name="pokemon" class="select">
<option value="494">Opción</option> //solamente pongo una opción de momento
</select>
</td>
</tr>
<tr>
<td class="headerstyle">Nivel</td>
<td colspan="6"><input type="text" name="level" readonly="readonly" size="3" maxlength="3" value="100" class="text" /></td>
</tr>
<tr class="headerstyle">
<td width="14%" class="headerstyle"> </td>
<td width="14%">PS</td>
<td width="14%">Ataque</td>
<td width="14%">Defensa</td>
<td width="14%">At. Especial</td>
<td width="14%">Def. Especial</td>
<td width="14%">Velocidad</td>
</tr>
<tr>
<td class="headerstyle">Stats</td>
<td><input type="text" id="hpstat" name="hpstat" size="3" maxlength="3" value="" class="text" /></td>
<td><input type="text" id="atkstat" name="atkstat" size="3" maxlength="3" value="" class="text" /></td>
<td><input type="text" id="defstat" name="defstat" size="3" maxlength="3" value="" class="text" /></td>
<td><input type="text" id="sastat" name="sastat" size="3" maxlength="3" value="" class="text" /></td>
<td><input type="text" id="sdstat" name="sdstat" size="3" maxlength="3" value="" class="text" /></td>
<td><input type="text" id="spdstat" name="spdstat" size="3" maxlength="3" value="" class="text" /></td>
</tr>
<tr>
<td class="headerstyle">EVs (Effort Values)</td>
<td><input type="text" id="hpev" name="hpev" size="3" maxlength="3" value="0" class="text" disabled="disabled" /></td>
<td><input type="text" id="atkev" name="atkev" size="3" maxlength="3" value="0" class="text" disabled="disabled" /></td>
<td><input type="text" id="defev" name="defev" size="3" maxlength="3" value="0" class="text" disabled="disabled" /></td>
<td><input type="text" id="saev" name="saev" size="3" maxlength="3" value="0" class="text" disabled="disabled" /></td>
<td><input type="text" id="sdev" name="sdev" size="3" maxlength="3" value="0" class="text" disabled="disabled" /></td>
<td><input type="text" id="spdev" name="spdev" size="3" maxlength="3" value="0" class="text" disabled="disabled" /></td>
</tr>
<tr>
<td class="headerstyle">Naturaleza</td>
<td colspan="6">
<select name="personality" class="select">
<option value="none">Ninguna</option>
</select>
</td>
</tr>
<tr><td colspan="7"><input type="submit" value="Calcular" id="btn_eps" name="submit" class="button" onclick="javascript:calc_ivs()" /></td></tr>
</table></form>
<br><br>
<script>
var hpstat = "hpstat"
var atkstat = "atkstat"
var defstat = "defstat"
var sastat = "sastat"
var sdstat = "sdstat"
var spdstat = "spdstat"
var iv_calc = "iv_calc"
</script>
<iframe name="dvwindow" style="border: 0px;" width="75%" height="420" src="ivcalculator.html" scrolling="no" frameborder="0">
Luego viene el código, en este caso solamente marco una linea como editable, puesto que no sé que más poner.
En esta página es en la que se mostraría el resultado:
Código HTML:
<script src="scripts/calc.js"></script>
</head>
<body style="margin: 3px; font-family:Georgia, 'Times New Roman', Times, serif;" text="#FFFFFF">
<script>
calc_ivs()
</script>
Y por último esto es lo que llevo hecho de script, en el .js:
Código PHP:
// JavaScript Document
function calc_ivs() //Manejo simple de IVs.
{
function validate_stats(hpstat,atkstat,defstat,sastat,sdstat,spdstat) {
var hpstat = "hpstat"
var atkstat = "atkstat"
var defstat = "defstat"
var sastat = "sastat"
var sdstat = "sdstat"
var spdstat = "spdstat"
if ($('btn-eps'),"click", calc_ivs) {
return math.floor (iv_calc = (hpstat + atkstat + defstat + sastat + sdstat + spdstat)) };
alert ("Prueba");
}
}
function initO() { //Actions to perform once the page has loaded
$('form').reset(); //reset all fields
toggle_theme();
tooltips();
display_status('<span class="loading">Inicializando...</span>');
$('calculator').style.minHeight = (1*(window.innerHeight?window.innerHeight:(document.body?document.body.clientHeight:''))-16)+'px'; /* remove this when including */
$('ept').style.visibility = 'hidden';
$('mode1').style.display = 'none';
toggle($('history'));
event_add($('btn-eps'),"click", calc_ivs);
}
He puesto esa alerta de prueba para ver si al pulsar el botón de calcular por lo menos sale la alerta, eso me indicaría que al menos llega hasta ese punto, pero la alerta no sale, así que en algo fallo.
Lo que busco es que tome los números que el usuario pondrá en los campos del formulario llamados hpstat, atkstat, defstat, sastat, sdstat y spdstat y los calcule mediante un script.
De momento lo he puesto como suma, aunque el script realmente es más complejo. Lo he puesto como suma porque es una operación sencilla y de momento solamente quiero ver si funciona. Si consigo hacer la operación de suma ya pasaría a reformular esa operación ya que es muchísimo más compleja.
Gracias !