Buenos días comunidad de programadores, tengo un dilema el cual no puedo resolver, tengo un código JavaScript el cual cambiar de tamaño la fuente dependiendo el valor ingresado en el input, hasta ahí todo bien, el detalle es cuando al guardar la información y volverla a cargar en el input esta ya no me la reconoce y no se por que o que debería de implementar para dicho problema.
<tr>
<td align="center">GLUCOSA</td>
<td align="center"><input class="form-control" type="text" name="glucosa" id="glucosa"
onkeyup="glu(this)" style="text-align: center;" onkeypress="return numeros(event)" value="
<?php echo $resul2["glucosa"]; ?>"/></td>
<td align="center">mg./dl.</td>
<td align="center">70 - 110</td>
</tr>
Tengo varios input con diferente id.
el código JavaScript me funciona hasta ese punto pero al cargar el valor guardado o reinicar la pagina esta ya no se ejecuta nuevamente o no me lo reconoce.
function glu(elemento){
if ($(elemento).val() < 70 | $(elemento).val() > 110 ) {
$(elemento).css("font-weight", "bold");
$(elemento).css("font-size", "15px");
} else {
$(elemento).css("font-weight", "");
$(elemento).css("font-size", "15px");
}
}
Si me pudieran ayudar a resolver esto por favor de lo agradecería mucho.
Igual me habían dado una solución en este grupo y la aplique pero la verdad no me funciono o no pude aplicarlo bien.
// Agrega una clase al input
<input class="form-control glu-selector" type="text" name="glucosa" id="glucosa"
onkeyup="glu(this)" style="text-align: center;" onkeypress="return numeros(event)" value="<?
php echo $resul2["glucosa"]; ?>"/>
// En tu script, agrega un iniciador
$(() => {
$('.glu-selector).each(function () {
let item = $(this);
if (item.val() < 70 || item.val() > 110 ) {
item.css("font-weight", "bold");
item.css("font-size", "15px");
} else {
item.css("font-weight", "");
item.css("font-size", "15px");
}
});
})Si me pudieran ayudar a resolver esto por favor de lo agradecería mucho.