tengo este codigo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form name="myform"> Your number: <input type="number" name="inputbox" id='textBox' value="" /> <input type="button" name="button" class="member" value="Click me!" /> <div class='box1' style='border:1px solid #333333;margin-top:15px;width:33.33%;height:50%;padding-left:15px;padding-right:15px;'> <h3> 0 </h3> <p> Valor </p> </div> </form> <script> $(function() { $('.member').click(function() { var answer = $("#textBox").val(); if (answer <= 20) { $('.box1').css('background-color', 'red').find('h3').html(answer); } else if (answer <= 50) { $('.box1').css('background-color', 'orange').find('h3').html(answer); } else { $('.box1').css('background-color', 'steelblue').find('h3').html(answer); } }); }); </script>Funciona. Pero me gustaría no tener que hacer clic para que aparezca el valor. Es decir, que se actualizaría dentro del div cuando escribiera el número en el campo "Tu número".
Por ejemplo, si escribo 75, el valor aparece automáticamente, sin tener que presionar ningún botón.
Intenté eliminar:
$('.member').click(function() {...})Pero no trabajes.
Debe agregar on input al cuadro de texto como,
$('#textBox').on("input", function(){ ... });Ejemplo de trabajo bifurcado:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form name="myform"> Your number: <input type="number" name="inputbox" id='textBox' value="" /> <input type="button" name="button" class="member" value="Click me!" /> <div class='box1' style='border:1px solid #333333;margin-top:15px;width:33.33%;height:50%;padding-left:15px;padding-right:15px;'> <h3> 0 </h3> <p> Valor </p> </div> </form> <script> $(function() { $('#textBox').on("input", function() { var answer = $("#textBox").val(); if (answer <= 20) { $('.box1').css('background-color', 'red').find('h3').html(answer); } else if (answer <= 50) { $('.box1').css('background-color', 'orange').find('h3').html(answer); } else { $('.box1').css('background-color', 'steelblue').find('h3').html(answer); } }); }); </script>