jQuery addClass example

Change class name on click in jQuery

by Anjana Silva

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <form>
    <div class="row">
      <input type="text" class="form-control w-50 mt-2 track-me" value=""/>
    </div>
    <div class="row">
      <input type="text" class="form-control w-50 mt-2 track-me" value=""/>
    </div>
    <div class="row">
      <input type="text" class="form-control w-50 mt-2 track-me" value=""/>
    </div>
    <div class="row">
      <input type="text" class="form-control w-50 mt-2 track-me" value=""/>
    </div> 
    <div class="row">
      <div id="result" class="p-3">Please type numbers</div>
    </div>
  </form>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

JavaScript

$(document).ready(function(){
	$('.track-me').change(function (){
  	total = 0;
  	$('.track-me').each(function  () {    	
    	if ($.isNumeric($(this).val())) {
      	total += +$(this).val();
      }
    });
  	$('#result').html('Total is : ' + total);
  });
});