CODEWITHSUNDEEP
javascript
Mike Haslam
Mike Haslam

Reputation: 171

function to increment / decrement more than stepper in javascript

Hello I am trying to rewrite a function that will increment / decrement more than 1 stepper in javascript. Here is what I tried so far

here is a codepen link http://codepen.io/Ongomobile/pen/XdyBgv/

Here is 1 of the steppers

<div class="qtyDiv">
        <label class="qtyLabel" for="qty1 " name"one"><abbr title="Quantity">Qty</abbr></label>
        <input class="qtyInput" id="qty1" value="0" name"one" />            
        <!-- <button class=" tallyBtn" id="down" onclick="modify_qty(-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="modify_qty(1)">+1</button> -->
        <button class=" tallyBtn" id="down" onclick="stepperVal("one",-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="stepperVal("one",1)">+1</button>
</div>

// This is current one
function modify_qty(val) {
  var qty = document.querySelector("#qty1").value;

  var new_qty = parseInt(qty,10) + val;

  if (new_qty < 0) {
    new_qty = 0;
  }

  document.querySelector("#qty1").value = new_qty;

  return new_qty;
}

This is what I tried

function stepperVal(name,val){
  var qty = 0;
  var new_qty = parseInt(qty,10) + val;

  if (new_qty < 0) {
    new_qty = 0;
  }
  [name].value = new_qty;
  return new_qty;
}

Upvotes: 1

Views: 306

Answers (2)

sacgro
sacgro

Reputation: 469

Use following it must work:

function stepperVal(name,val){
var qty = 0;
var new_qty = parseInt(document.getElementsByName(name),10) + val;

  if (new_qty < 0) {
   new_qty = 0;
   }
  document.getElementsByName(name).value = new_qty;
return new_qty;
}

Upvotes: 1

Anthony E
Anthony E

Reputation: 11235

A few issues:

  • What's the purpose of this line parseInt(qty,10) + val;? parseInt is intended to convert a string into its equivalent digit. Not much point in calling it on a base10 number.
  • Not sure what the point of the name argument to stepperVal is. Isn't the amount to be stepped already implied by the value argument?
  • You can pass a reference to the object triggering the onclick event by passing this to your function declared within the onclick.
  • new_qty always evaluates to val
  • stepperVal(arg,-1) is actually the same as stepperVal(arg,0). Why not just call it that way?

Updated code

replace "one" with this in :

<div class="qtyDiv">
        <label class="qtyLabel" for="qty1 " name"one"><abbr title="Quantity">Qty</abbr></label>
        <input class="qtyInput" id="qty1" value="0" name"one" />            
        <!-- <button class=" tallyBtn" id="down" onclick="modify_qty(-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="modify_qty(1)">+1</button> -->
        <button class=" tallyBtn" id="down" onclick="stepperVal(this,-1)">-1</button>
        <button class="tallyBtn"id="up" onclick="stepperVal(this,1)">+1</button>
</div>

Simplified JS:

function stepperVal(event, val){    
  clicked_link = event.target
  return clicked_link.value = Math.max(0, val);  # Return the greater of 0 and `val`
}

Upvotes: 1

Related Questions