Calculadora que asigna resultado a una frase e imagen

franjunqueras · #1 (**permalink**) 14/05/2015, 09:20

Estimados,

Soy nueva en el foro y Necesito su ayuda!!! para asignar una imagen y una frase al resultado de una Calculadora.

Tengo éste código y como también estoy recién aprendiendo a escribir Javascript no sé como hacer que al lado del campo en donde se muestra el resultado, aparezca una imagen y una frase según el número de resultado...

____________________________________

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script>

var valor1 = 0;
var valor2 = 0;
function sumar(radio) {

var valor = parseInt(radio.value);

if (radio.name == "RadioGroup1")
valor1 = valor;
else
valor2 = valor;

document.getElementById("resultado").value = valor1 + valor2;

}

</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">

<label>
<input type="radio" name="RadioGroup1" value="1" onclick="sumar(this);" id="RadioGroup1_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="2" onclick="sumar(this);" id="RadioGroup1_1" />

Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="3" onclick="sumar(this);" id="RadioGroup1_2" />

Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="4" onclick="sumar(this);" id="RadioGroup1_3" />

Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="5" onclick="sumar(this);" id="RadioGroup1_4" />

Opción</label>
<br />
</p></td>
<label>
<input type="radio" name="RadioGroup2" value="1" onclick="sumar(this);" id="RadioGroup2_0" />

Opción1</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="2" onclick="sumar(this);" id="RadioGroup2_1" />

Opción2</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="3" onclick="sumar(this);" id="RadioGroup2_2" />
Opción3</label>

<br /><br />

<input type="text" name="resultado" id="resultado" disabled="disabled" value="0" />

</form>
</body>
</html>

____________________________________

(EJEMPLO)

Si la suma de los radio button da 2 que aparezca una imagen y una frase que diga BAJO!

Si la suma de los radio button da 4 que aparezca una imagen y una frase que diga MEDIO!

Si la suma de los radio button da 6 que aparezca una imagen y una frase que diga ALTO!

Entiendo que esto se realiza con condiciones if, else... pero no sé como se escribe.

LES AGRADEZCO MUCHÍSIMO!!!!!

Saludos,

PHPeros · #2 (**permalink**) 14/05/2015, 11:02

Dentro de las estructuras de control, la más adecuada para el caso sería switch. Lee cómo se hace y si tienes alguna duda comenta, será más útil que el que te demos el código ya hecho.

pr0x · #3 (**permalink**) 14/05/2015, 19:34

recueda que caundo accedes a un elemento del don puedes cambiar sus atributos ej:
<img id='imgresp' src="nada.gif">
document.getElementById("imgresp").src="alto.gif";
//y asi es co,o puedes cambiar el attributo que hace referencia a la url de la img

var imgresp = document.getElementById("imgresp");
var resp = suma(a,b);
if(resp<=2) { ... imgresp.src='baja.gif'}
else if(resp<=5) { ... imgresp.src='alto.gif'}
//puedes hacer una funcion swapImg(name) para desaclopar el codigo

En caso de la asignacion de la img no sea por intervalo entonces como te indican es mejor usar switch-case donde defines el comportamiento para cada caso. ej:
switch(resp) {
case 2: swapImg('baja') //comportamiento si bajo
break;
case 4: swapImg('media') //comportam si medio
break;
default: swapImg('none); //si no es niguno de los anteriores
break;

}

function swapImg(name) {
imgresp.src="content/img/"+name+".gif"
}
//esto podria se un ejemplo muy por arriba de la solucion