Simple conditions in JQuery calculation

Question

I'm stuck with (a simple) JQuery problem. I'm trying to make a simple real-time cost calculator with 1 input field. Now, I'd like to use different price ranges for the input variable. For example:

• Input value 1-15 is 4 per item;
• Input value 16-100 is 3 per item;
• Input value 100-200 is 2 per item;
• With input values above 200 the result is 'Don't eat all the gummballs'.

This is what I have so far:

$(document).ready(function() {
  $('#gummball').keyup(function() {
    $('#result').text($('#gummball').val() * 1.5);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price of gummball:</label><input name="gummball" id="gummball" type="text" />
<br /> Total: &euro; <span id="result"></span>

I hope one of you guys can help me out! :)

Answer 1

$(document).ready(function() {
  $('#gummball').keyup(function() {
  if($('#gummball').val() <= 200)
    $('#result').html($('#gummball').val() * 1.5);
  else
    $('#result').html(($('#gummball').val() * 1.5) + " <br><b>Don't eat all the gummballs</b>");   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price of gummball:</label><input name="gummball" id="gummball" type="text" />
<br /> Total: &euro; <span id="result"></span>

Answer 2

$(document).ready(function() {
  $('#gummball').keyup(function() {
    if($('#gummball').val() > 0 && $('#gummball').val() < 16) {
    	$('#result').text($('#gummball').val() * 4);
    }
    if($('#gummball').val() > 15 && $('#gummball').val() < 101) {
    	$('#result').text($('#gummball').val() * 3);
    }
    if($('#gummball').val() > 100 && $('#gummball').val() < 201) {
    	$('#result').text($('#gummball').val() * 2);
    }
    if($('#gummball').val() > 200) {
    	$('#result').text('Don`t eat all the gummballs');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price of gummball:</label>
<input name="gummball" id="gummball" type="text" />
<br /> Total: &euro; <span id="result"></span>