assign jquery selections to vars

HTML

<input id="myNumberInput" type="text" placeholder="enter a number please">
<button id="calculateBtn">
  Calculate
</button>
<button id="clearBtn">
  Clear
</button>

<div id="output"></div>

JavaScript

// assign the selected jquery element to a variable 
// because we're going to use it more than once
var myNumberInput = $("#myNumberInput");

$("#calculateBtn").click(function() {

	// since we use myNumberInput.val() multiple times, we would
  // normally assign that to it's own variable, but this is to show
  // using the selected element multiple times...
  if(myNumberInput.val()!=="") {
  	$("#output").append(parseFloat(myNumberInput.val())+10+"<br/>");
  }
 	
  // if the input is over 100 make it red, otherwise, make it green...
  (myNumberInput.val() > 100) ? myNumberInput.css('background-color','red') : myNumberInput.css('background-color','#71E793')
});


$("#clearBtn").click(function() {
	$("#output").html('');
  myNumberInput.val('');
  myNumberInput.trigger('focus');
});