JavaScript - Lista con textarea; máquina de escribir y cálculos.

 
Vista:

Lista con textarea; máquina de escribir y cálculos.

Publicado por ThunderWolf (1 intervención) el 09/07/2011 23:34:04
Hola, me estreno en el foro con una duda sobre como adornar un poco una lista que muestra sus resultados en un textarea. Por otro lado, ya que pedir es gratis, también me gustaría rehacer el formulario de tal modo que escribiendo unos datos numéricos concretos obtuviera los resultados en otro campo, me explico.

Este es el codigo que tengo elaborado a base de copy&paste. Lo he adaptado un poco; tengo algunas nociones de html pero prácticamente ni idea de javascript:

Head:

1
2
3
4
5
6
7
8
9
10
11
12
<script language="JavaScript">
 
window.onload = function() {
selectelem = document.getElementById("lista");
textareaelem = document.getElementById("info");
textareaelem.innerHTML = selectelem.value;
selectelem.onchange = function() {
textareaelem.innerHTML = this.value;
}
}
 
</script>


Body:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
<select id="lista" size="1" style="width: 370; color: #00ff00; background-color: #000000; font-size: 100%; font-family: Arial black">
<option value="1.000 ratones salvados en modo normal. Ningún privilegio." CHECKED>1.- Peón</option>
<option value="1.300 ratones salvados en modo normal, o 200 en modo dificil, o haber llegado 75 veces el primero. Puede reclutar.">2.- Cocinero</option>
<option value="1.700 ratones salvados en modo normal, o 500 en modo dificil, o haber llegado 100 veces el primero. Puede reclutar.">3.- Soldado</option>
<option value="2.200 ratones salvados en modo normal, o 900 en modo dificil, o haber llegado 150 veces el primero. Puede reclutar.">4.- Tesorero</option>
<option value="2.800 ratones salvados en modo normal, o 1.400 en modo dificil, o haber llegado 225 veces el primero. Puede reclutar.">5.- Reclutador</option>
<option value="3.500 ratones salvados en modo normal, o 2.000 en modo dificil, o haber llegado 325 veces el primero. Puede reclutar.">6.- Cazador</option>
<option value="4.300 ratones salvados en modo normal, o 2.700 en modo dificil, o haber llegado 450 veces el primero. Puede reclutar.">7.- Iniciado</option>
<option value="5.200 ratones salvados en modo normal, o 3.500 en modo dificil, o haber llegado 600 veces el primero. Puede reclutar y cambiar la descripción.">8.- Aprendiz de Chamán</option>
<option value="10.000 ratones salvados en modo normal, u 8.000 en modo dificil, o haber llegado 1.000 veces el primero. Puede reclutar y cambiar la descripción.">9.- Chamán de la Tribu</option>
<option value="Solo el fundador de la tribu puede poseer este rango, y tiene pleno control.">10.- Jefe Espiritual</option>
</select><font face="Courier"><b> <--- Lista desplegable</b></font><br>
 
<textarea id="info" cols="75" rows="2" style="width: 600; color: #ffffff; background-color: #000000; font-weight: bold; font-size: 90%; font-family: Verdana; text-align: justify" readonly="readonly"></textarea>
</form>


El ejemplo resultante es este: http://www.mipaginapersonal.movistar.es/web3/thunderwolf/ejemplo.htm

Lo que pretendo es añadir a ese mismo codigo, si es posible, el efecto de máquina de escribir a los resultados del textarea.

Por otro parte, y he aquí lo complicado, me gustaría crear otro tipo de formulario desde cero de tal modo que el visitante escribiera sus propios datos y la aplicación le devolviera en primer lugar su rango en base a los mismos, y cuanto le faltaría para alcanzar los siguientes. Algo como esto:

-------------------------------------------

Ratones salvados en modo normal: [ Campo de texto para introducir datos ]

Ratones salvados en modo dificil: [ Campo de texto para introducir datos ]

Veces que has llegado el primero: [ Campo de texto para introducir datos ]

Tu rango actual es: [ Campo de texto con resultado ]

-------------------------------------------------------------

¿Que rango quieres alcanzar? [ Lista de opciones ] [ Privilegios de la opcion ]

Para el rango seleccionado te falta lo siguiente:

Ratones salvados en modo normal [ Campo de texto con resultado ] , o bien

Ratones salvados en modo difícil [ Campo de texto con resultado ] , o bien

Haber llegado el primero [ Campo de texto con resultado ] veces.

---------------------------------------------------------------

En la primera parte del formulario, tendrían que mostrarse los resultados a tiempo real, sin botones. No son necesarios los tres datos simultáneamente, si no que basta solo uno de ellos para calcular un rango preliminar. Si el visitante añadiera el segundo o tercer dato, y estos últimos equivalieran a un rango mayor, cambiaría el resultado pero no por ello estaría obligado a rellenar los tres campos, no se si me he explicado con claridad.

Los textos y como estén colocados es lo de menos, eso ya podría adaptarlo yo sin problemas. Lo que necesito es la ecuación del javascript en si, y un boceto de formulario para saber como ubicarlo.

Si fuera complicado de hacer o resultara sencillamente imposible, me bastaría solo con el efecto de maquina de escribir en el código que ya tengo hecho.

Gracias de antemano por vuestra ayuda; no la solicitaría si pudiera hacerlo por mis propios medios. A pesar de haber encontrado decenas de ejemplos de código de maquina de escribir en textarea, no se de que manera podría fusionarlo con la lista que tengo elaborada. Y sobre la otra (extensa) petición, es evidente que no hay ejemplo alguno que se adapte a mis necesidades. Sin saber programación en javascript, esta es mi última alternativa.

Saludos :-)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder