1

tengo una función que calcula automática un puntaje y lo muestra en un input de solo lectura, y de acuerdo al puntaje calculado quiero mostrarle una información(riesgo), pero como el input es readonly no me funciona el .change()

Estos son los input de puntaje y de riesgo

<input class="form-control" type="text" id="riesgo" readonly>
<input class="form-control" type="number" id="puntaje" readonly>

Esta es la función que pretendia hacer la tarea de mostrarle el riesgo:

$('#puntaje').change(function() {
    puntaje = $('#puntaje').val();
    console.log(puntaje);
    if (puntaje >= 0 && puntaje <= 2) {
        $('#riesgo').val("BAJO");
    } else {
        $('#riesgo').val("ALTO");
    }
});

Alguna sugerencia sobre como podría hacer que funcione esto?

2
  • 1
    deberias calcular eso dentro de la misma funcion que calcula el puntaje. el 21 oct. 2020 a las 22:41
  • El problema es que estas agregando el evento change al elemento puntaje, este no podra cambiar nunca ya que es de solo lectura que necesidad hay de eso ?? el 21 oct. 2020 a las 22:46

1 respuesta 1

0

1.- Yo te recomendaria que solo agregues la propiedad readonly a tu input con ID riesgo para que puedas capturar el valor en el evento change de tu input con ID puntaje quedando de la siguiente manera:

<input class="form-control" type="text" id="riesgo" readonly />

  <input
      class="form-control"
      type="number"
      value="0"
      min="0"
      max="100"
      id="puntaje"
    />

2.- De esta manera podras capturar el valor cuando este cambie y obtener el resultado esperado, te muestro un ejemplo practico, comentado para que puedas entenderlo mejor

/*ACCEDEMOS A CADA UNO DE TUS INPUS 
Y LOS ALMACENAMOS EN UNA CONSTANTE*/
const puntaje = document.querySelector("#puntaje");
const riesgo = document.querySelector("#riesgo");

/*LE AGREGAMOS EL EVENTO CHANGE A TU INPUT PUNTAJE*/
puntaje.addEventListener("change", () => {
  //OBTENEMOS EL VALOR QUE HAY QUE HAY EN TU INPUT
  let puntajeValor = puntaje.value;

  //REALIZAS TU CONDICION Y EL MENSAJE SE MOSTRARA DE ACUEDO A TU CONDICION
  if (puntajeValor >= 0 && puntajeValor <= 2) {
    riesgo.value = "BAJO";
  } else {
    riesgo.value = "ALTO";
  }
});
 <input class="form-control" type="text" id="riesgo" readonly />
    <input
      class="form-control"
      type="number"
      value="0"
      min="0"
      max="100"
      id="puntaje"
    />

Tu Respuesta

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

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