0

Necesito una ayuda, ya que quiero reducir mi código y centrarlo todo en la función de casos, o en si tener solo una función

JQUERY

$(document).ready(function(){
    var fuerza = 600;
    var value_masa = 100;
    $("#masa").val(value_masa);
    var posicion_original = -200;
    $("#barco").css("margin-top",posicion_original);
    var resultado_aceleracion = 0;
    $("#aceleracion").text(resultado_aceleracion);
    var imagenes = [$("#objeto_1"),$("#objeto_2"),$("#escultura"),$("#objeto_3")];

    /*----------BOTON INICIO----------*/
    $("#btniniciar").on("click", function(){
        $("#btniniciar").hide();
        $("#btnreiniciar").show();
        $("#masa").prop("disabled",false);
        $("#masa").css("color","white");
        $("#btnarriba").prop("disabled",false);
        $("#btnabajo").prop("disabled",false);
        resultado_aceleracion = fuerza / value_masa;
        $("#aceleracion").text(resultado_aceleracion);
    });

    /*----------FUNCION PARA REDONDEAR----------*/
    function redondeo(valor_value){
        if (isNaN(valor_value)){
            return  100;
        }
        valor_value = (Math.round(valor_value / 100)) * 100;
        if(valor_value <= 100){
            return 100;
        }
        if(valor_value >= 500){
            return 500;
        }
        return valor_value;
    }

    /*--------FUNCION GENERAL DE LA MASA--------*/
    function casos(valor_value){
        var valor_value = (valor_value / 100) - 1;
        var otra_pocision = posicion_original + (5 * valor_value);
        $("#barco").css("margin-top", otra_pocision);
        resultado_aceleracion = fuerza / value_masa;
        $("#aceleracion").text(resultado_aceleracion);
        for(var i = 0; i < imagenes.length; i++){
            imagenes[i].show();     
            if(valor_value <= i){
                imagenes[i].hide();
            }
        }
        return valor_value * 100;
    }

    /*----------CUANDO SE INGRESA UN VALOR EN LA MASA----------*/
    $("#masa").keydown(function(e){
        if(e.which == 13){
            var valor_value = $("#masa").val();
            var valor_redondeado = redondeo(valor_value);
            casos(valor_redondeado);
            $("#masa").val(valor_redondeado);
            value_masa = valor_redondeado;
            resultado_aceleracion = fuerza / value_masa;
            $("#aceleracion").text(resultado_aceleracion);
        }
    });

    /*---------BOTON ARRIBA---------*/
    $("#btnarriba").on("click", function(){
        value_masa = value_masa + 100;
        if(value_masa >= 500){
            value_masa = 500;
        }
        casos(value_masa);
        $("#masa").val(value_masa);
    });

    /*---------BOTON ABAJO---------*/
    $("#btnabajo").on("click", function(){
        value_masa = value_masa - 100;
        if(value_masa <= 100){
            value_masa = 100;
        }
        casos(value_masa);
        $("#masa").val(value_masa);
    });

    /*---------BOTON REINICIAR---------*/
    $("#btnreiniciar").on("click", function(){
        value_masa = 100;
        casos(value_masa);
        $("#masa").val(value_masa);
    });
});

1 respuesta 1

0

Una forma de reducir es hacer una función única para los 4 botones, todos con una clase común class="btn".

Lo he modificado para añadir un pequeño snnipet con parte del código para que puedas verlo en funcionamiento. A partir de aquí ya podrías añadir el resto de las funcionalidades de tu código para completarlo.

$(".btn").on("click", function(){
    var value_masa = 100;
   var id = $(this).attr('id');
   if (id=="btniniciar") { 
      $("#btniniciar").hide();
        $("#btnreiniciar").show();
        $("#masa").prop("disabled",false);
        $("#btnarriba").prop("disabled",false);
        $("#btnabajo").prop("disabled",false);
   } else {
        if (id=="btnarriba") { 
          if (value_masa >= 400) {
             value_masa = 500;
          } else {
             value_masa = value_masa + 100;
          }
        } else if (id=="btnabajo") { 
          if (value_masa <= 100) {
             value_masa = 100;
          } else {
             value_masa = value_masa - 100;
          }
        } else if (id=="btnreiniciar") { 
          value_masa = 100;
        }
        alert(value_masa);
   }
    $("#masa").val(value_masa);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btniniciar" class="btn">
Iniciar
</button>
<button id="btnarriba" class="btn" disabled>
up
</button>
<button id="btnabajo" class="btn" disabled>
down
</button>
<input type="number" id="masa" disabled/>

4
  • En la funcion click, al momento de dar click no se me habilitan los demas botones, se queda igual y en la funcion de redondeo, no funciona con numeros menores a 100 Commented el 27 jul. 2018 a las 19:40
  • Deberían habilitarse al darle al botón inicial, ya que hace los mismos procesos que hacía el onclick de este botón. En redondeo no sé si me pierdo algo, haces un redondeo que devuelve un int y lo multiplicas por 100, no debería ser menor que 100 salvo que sea <1, si se da el caso entonces si sería necesario el if<100, pero es más eficaz una estructura if else que dos ifs, porque si entra en el primero ya no necesita comprobar el segundo.
    – Carmen
    Commented el 27 jul. 2018 a las 20:14
  • Lo de los botones no los realiza para nada, y lo del redondeo marca errores con números menores a 100 Commented el 31 jul. 2018 a las 16:59
  • @JorgeGutierrezYañez lo he modificado para que mostrar la funcionalidad de los botones con un ejemplo reducido.
    – Carmen
    Commented el 1 ago. 2018 a las 7:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.