This is a tags counter that I implemented to a site. The script is supposed to display the number of tags that a user can still input - the limit has been set to 5 items (tagsLeftTmp = 5
). The input field $(".bootstrap-tagsinput")
has two events attached to it - one event substracts 1 from tagsLeftTmp
, the other adds 1.
As you can see, the DRY principle is violated by repeating this line three times:
tagsCounter.html(tagsLeftTmp + ' of ' + tagsLimit + ' tags left');
var tagsLeftTmp = tagsLimit;
var tagsCounter = $("#tags-counter");
tagsCounter.html(tagsLeftTmp + ' of ' + tagsLimit + ' tags left');
$(".bootstrap-tagsinput").on('itemAdded', function(e) {
tagsLeftTmp = tagsLeftTmp - 1;
tagsCounter.html(tagsLeftTmp + ' of ' + tagsLimit + ' tags left');
return tagsLeftTmp;
});
$(".bootstrap-tagsinput").on('itemRemoved', function(e) {
tagsLeftTmp = tagsLeftTmp + 1;
tagsCounter.html(tagsLeftTmp + ' of ' + tagsLimit + ' tags left');
return tagsLeftTmp;
});
How could I make this code adhere to the DRY principle?