patternjavascriptMinor

Visual increment and decrement button controls in jQuery

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

incrementvisualcontrolsjquerydecrementbuttonand

Problem

I currently have a working implementation of a + and - tank level thingy (I don't really know what to call it). In which will be able to 'add' or 'remove' so-called 'liquid' from the container.

However, I feel my implementation of this is very inefficient, and would appreciate your input on this matter.

 $(document).ready(function() {

   $('#plus1').click(function() {
     var myVal = $('.loadingTank').css("box-shadow");
     var x = myVal.slice(-1); 
     if (x == 't') {
       myVal = myVal.split(" ")[4];
     } else {
       myVal = myVal.split(" ")[2];
     }
     myVal = -(parseInt(myVal, 10) / 5);
     if (myVal  99) {
       $('#tankPercentage').text("FULL");
     } else {
       $('#tankPercentage').text(myVal + "%");
     }
     myVal = myVal * 5;
     $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset");
   });

   $('#minus1').click(function() {
     var myVal = $('.loadingTank').css("box-shadow");
     var x = myVal.slice(-1);
     if (x == 't') {
       myVal = myVal.split(" ")[4];
     } else {
       myVal = myVal.split(" ")[2];
     }
     myVal = -(parseInt(myVal, 10) / 5);
     //gets percentage of tank //myVal=Math.round(myVal);
     if (myVal >= 1) {
       myVal -= 1;
     }
     if (myVal

.loadingTank {
display: inline-block;
border: 2px solid black;
margin: 15px;
max-width: 350px;
height: 500px;
width: 30%;
background-color: #808080;
box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;
/Change this value for leveling/
float: left;
position: relative;
border-radius: 2%;
}
.loadingTank:before {
content: "";
width: 70%;
height: 100%;
float: left;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0

Solution

I think you can refactor it with the DRY principle:

$('#plus1').click(function () {
  var myVal = getBoxShadow($('.loadingTank'));

  myVal = -(parseInt(myVal, 10) / 5);

  if (myVal  99) {
    text = "FULL";
  }else if (value < 1) {
    text = "EMPTY";
  }else {
    text = value + "%";
  }

  $element.text(text);
}

I also think it's good to move the color "red" and "#808080" to your CSS class, and then change .css('background-color', 'xxx') to be .addClass, .removeClass or .toggleClass.

Code Snippets

$('#plus1').click(function () {
  var myVal = getBoxShadow($('.loadingTank'));

  myVal = -(parseInt(myVal, 10) / 5);

  if (myVal <= 99) {
    myVal += 1;
  }

  displayAlarm($('.loadingTank'), myVal);
  displayValue($('#tankPercentage'), myVal);

  myVal *= 5;
  $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset");
});

function getBoxShadow($element) {
  var value = $element.css("box-shadow"),
      x = value.slice(-1);
  return x === "t" ? value.split(" ")[4]: value.split(" ")[2];
}

function displayAlarm($element, value) {
  var color = value < 11 ? "red": "#808080";
  $element.css("background-color", color);
}

function displayValue($element, value) {
  var text;

  if (value > 99) {
    text = "FULL";
  }else if (value < 1) {
    text = "EMPTY";
  }else {
    text = value + "%";
  }

  $element.text(text);
}

Context

StackExchange Code Review Q#72149, answer score: 2

Revisions (0)

No revisions yet.