[SOLUCIONADO] Calculos y Resultado HTML/Javascript

aegvrrss · #1 (**permalink**) 30/03/2016, 18:05

Buenas noches! Tengo un par de dudas con una especie de calculadora que estoy haciendo, y ya que he buscado sin conseguir lo que necesito decidi preguntar por aca. Si pueden identificar mi falla, por favor! LEs agradeceria.

Necesito básicamente 2 cosas: Que dependiendo de la selección que se haga primero, muestre un menù con opciones especificas de esa selección y oculte las otras dos. Y segundo, que una vez seleccionada esa opción y presione el botón del final arroje una multiplicación entre el valor colocado al inicio del formulario con el valor asignado a la selección realizada.

Este es el código HTML, hay códigos innecesarios pues he tratado de varias maneras sin exito:

Código HTML:

<!doctype html>
<html>
<head>
<script language="javascript">
function multiplicar() {...}
<center><title>Calculo Edad de la Mascota</title>
</center>
function mostrarReferencia(){
	if (document.EdadMascota.Cachorro[1].checked == true) {
		document.getElementById('edad2').style.display='none';
		document.getElementById('edad3').style.display='none';
	}
	else (document.EdadMascota.Adulto[1].checked == true) {
		document.getElementById('edad1').style.display='none';
		document.getElementById('edad3').style.display='none';
		}
	else (document.EdadMascota.AdultoM[1].checked == true) {
		document.getElementById('edad1').style.display='none';
		document.getElementById('edad2').style.display='none';
}
function ocultar() {
	if (document.EdadMascota.Cachorro[1].checked == true) {
		document.getElementById('edad2').selected='none' ;
		document.getElementById('edad3').selected='none';
function multiply() {
	if (document id
}
</script>
</head>

<body>
<center>
<b>Cálculo Edad de la Mascota</b>
    <br>
    <br>
<form name="operaciones">
    <td>
    · <b>Peso de la Mascota:</b> <input id="num1" type="text"/> Kilogramos ·
    </td></form>
    <br>
    <b>· Etapa de Desarrollo ·</b>
    <br>
    <br>
    <form action="EdadMascota>" method="post" name="EdadMascota">
<input type="radio" name="Cachorro" value="edad1" id="edad1" onclick="Cachorro"/> Cachorro | <input type="radio" name="Adulto" value="edad1" id="edad2" onclick="Adulto"/>Adulto | <input type="radio" name="Cachorro" value="edad3" id="edad3" onclick="AdultoM"/>Adulto Mayor
	<br>
	<br>
    <select name="EdadMascota" size="4" >
    <option name="edad1">Cachorro</option>
    <option name="edad2">Adulto</option>
    <option name="edad3">Adulto Mayor</option>
 </select> 
	<br>    
    <br>
    <b>· Estilo de Vida ·</b>
    <br>    
    <br>
    <div id="Cachorro" style="display:block;">
    ·<select name="EVCachorro"/> 
<option value="0.10">2 - 4 Meses
<option value="0.08">4 - 6 Meses
<option value="0.06">6 - 8 Meses
<option value="0.035">8 - 12 Meses
</select>·
	<div id="Adulto" style="display:block;">
<select name="EVAdulto"/> 
<option value="0.025">Normal
<option value="0.03">Activo
<option value="0.02">Inactivo
<option value="0.04">De Trabajo
<option value="0.02">Con Sobrepeso
<option value="0.04">En Reproducción
</select>·
<div id="AdultoM" style="display:block;">
<select name="EVAdulto Mayor"/> 
<option value="0.02">Normal
<option value="0.02">Activo
<option value="0.02">Inactivo
<option value="0.02">Sobrepeso
</select>·
	<br>
    <br>
    <input type="button" value="CALCULAR" onclick="operaciones('multiplicar'); return false;" /><br />
    <br>
  <input type="text" id="resultado">
</form><script type="text/javascript" src="Prueba.js"></script>
</body>
</html>
</center>

Y aquí el Javascript:

Código HTML:

function multiplicar(){
if (isNaN(parseFloat(document.getElementById('CALCULAR').value))) {
	m1 = document.getElementById("num1").value;
    m2 = document.getElementById("edadmascota").value;
	r = m1*m2;
	document.getElementById("resultado").value = r;
}

function comprobar(){
    var edad1 = document.getElementById('edad1');
    var edad2 = document.getElementById('edad2');
    var edad3 = document.getElementById('edad3');
    if(edad1.value > 2)
    {
      EVAdulto.style.display = 'block';
    }
    else
    {
      EVAdulto Mayor.style.display = 'block';
    }
  }
  function comprobar(){
if (isNaN(parseFloat(document.getElementById('num1').value))) {
        alert("Indique la Edad en 'num1");
        document.getElementById("num1").innerText = "0";
        document.getElementById("num1").focus();
        } else if (isNaN(parseFloat(document.getElementById('EdadMascota').value))) {
        alert("Seleccione el Estilo de Vida de la Mascota'");
        document.getElementById("EdadMascota").innerText = "0";
        document.getElementById("EdadMascota").focus();

Zeroed · #2 (**permalink**) 31/03/2016, 09:14

Código HTML:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script language="javascript">
/* function multiplicar() {...} */
var rbtSeleccionado;
function Seleccion(rbt){/* Recibe como parametro al radio button */
     rbtSeleccionado = rbt; /* Coloca al radio button seleccionado en la variable*/
     
            /* Recorre todos los radiobuttons del form */
    for (i=0;i<document.EdadMascota.radio.length;i++){ 
            if(rbt.id != document.EdadMascota.radio[i].id){/* Cuando no sea el rbt seleccionaro*/
                document.EdadMascota.radio[i].checked=false; /* Quita los checkeds de todos lo radio buttons */
               }
   	} 
        
       // rbt.cheked=true; /* Chekea al radio button seleccionado */
       
        
        
        var opcion = rbt.id;/* Asigna el id del radio button*/

             switch(opcion) {
             case 'rbtCachorro':/* Cuando seleccionas radio button Cachorro*/
                 /* Esconder selects*/
                    document.getElementById('Adulto').style.display='none';
                    document.getElementById('AdultoM').style.display='none';
                    /* Muestra div correspondiente a la seleccion*/
                    document.getElementById('Cachorro').style.display='inline-block';
                    
                 break;
             case 'rbtAdulto':/* Cuando seleccionas radio button Adulto*/
                     /* Esconder selects*/
                    document.getElementById('Cachorro').style.display='none';
                    document.getElementById('AdultoM').style.display='none';
                    /* Muestra div correspondiente a la seleccion*/
                    document.getElementById('Adulto').style.display='inline-block';
                 break;
             case 'rbtAdultoMayor':/* Cuando seleccionas radio button Adulto Mayor*/
                     /* Esconder selects*/
                    document.getElementById('Adulto').style.display='none';
                    document.getElementById('Cachorro').style.display='none';
                    /* Muestra div correspondiente a la seleccion*/
                    document.getElementById('AdultoM').style.display='inline-block';
                 break;        

         }
}
function multiplicar(){
    /* Recorre todos los radiobuttons del form */
     var opcion = rbtSeleccionado.id; 
     var idSelect;
     var estiloVida;
     var kilogramos;
      
        switch(opcion) {
             case 'rbtCachorro':/* Cuando seleccionas radio button Cachorro*/
                    idSelect='selCachorro';
                 break;
             case 'rbtAdulto':/* Cuando seleccionas radio button Adulto*/
                   idSelect='selAdulto';
                 break;
             case 'rbtAdultoMayor':/* Cuando seleccionas radio button Adulto Mayor*/
                   idSelect='selAdultoMayor';
                 break;        
         }
            /* Busca select definido por la selección de radiobuttons*/
            for (i=0;i<document.getElementById(idSelect).options.length;i++){
                       if(document.getElementById(idSelect).options[i].selected){/* Option selccionado*/
                           estiloVida=document.getElementById(idSelect).options[i].value;/* sacar valor*/
                       }
              }
              /* Multiplicación */
                kilogramos = document.getElementById('txtKg').value;
                
                var resultado = kilogramos*estiloVida;/* Operación que necesitabas */
                document.getElementById('txtResultado').value = resultado;
                
}

</script>
    </head>
    <body>
       <b>Cálculo Edad de la Mascota</b>
    <br>
    <br>
<form name="operaciones">
    <td>
    · <b>Peso de la Mascota:</b> <input id="txtKg" type="text"/> Kilogramos ·
    </td></form>
    <br>
    <b>· Etapa de Desarrollo ·</b>
    <br>
    <br>
    <form action="EdadMascota>" method="post" name="EdadMascota">
        <input type="radio" name="radio" value="Cachorro" id="rbtCachorro" onclick="Seleccion(this)"/> Cachorro |
<input type="radio" name="radio" value="Adulto" id="rbtAdulto" onclick="Seleccion(this)"/>Adulto |
<input type="radio" name="radio" value="Adulto Mayor" id="rbtAdultoMayor" onclick="Seleccion(this)"/>Adulto Mayor

	<br>
	<br>
	<br>    
    <br>
    <b>· Estilo de Vida ·</b>
    <br>    
    <br>
    <div id="Cachorro" style="display:inline-block;">Cachorro
    <select name="selCachorro" id="selCachorro"/> 
        <option value="0.10">2 - 4 Meses
        <option value="0.08">4 - 6 Meses
        <option value="0.06">6 - 8 Meses
        <option value="0.035">8 - 12 Meses
    </select>·
    </div>·
    ·
	<div id="Adulto" style="display:inline-block;"> Adulto
                    <select name="selAdulto" id="selAdulto"/> 
                <option value="0.025" >Normal
                <option value="0.03">Activo
                <option value="0.02">Inactivo
                <option value="0.04">De Trabajo
                <option value="0.02">Con Sobrepeso
                <option value="0.04">En Reproducción
            </select>
        </div>·
        ·
        <div id="AdultoM" style="display:inline-block;">Adulto Mayor
            <select  name="selAdulto_Mayor" id="selAdultoMayor"/> 
                <option value="0.02">Normal
                <option value="0.02">Activo
                <option value="0.02">Inactivo
                <option value="0.02">Sobrepeso
        </select>·
        </div>·
        
	<br>
    <br>
    <input type="button" value="CALCULAR" onclick="multiplicar(); return false;" /><br />
    <br>
    <p>Resultado</p><input type="text" id="txtResultado">
</form><script type="text/javascript" src="Prueba.js"></script>
    </body>
</html>

Nota: Hola, esto fue lo que interpreté de tu necesidad espero que te siva.
Pdt: Si estás aprendiendo a programar intenta adoptar buenas prácticas de
programación. Saludos. Zero Ed!