Change element dinamically with jQuery

February 27, 2022

I have this code:

       <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>

It works. But, I’d like to not need to click for the value to appear. That is, that it would be updated inside the div when I typed the number in the "Your number" field.

For example, if I type 75, the value appears automatically, without having to press any button.

I tried remove:

$('.member').click(function() {...})

But don’t work.

>Solution :

You need to add on input to the text box like,

$('#textBox').on("input", function(){ ... });

Forked working example:

<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>