How to use same function for different Id's in JavaScript?

Question

function add() {
  var txtNumber = document.getElementById("book");
  var newNumber = parseInt(book.value) + 1;
  book.value = newNumber;
}

function sub() {
  var txtNumber = document.getElementById("book");
  var newNumber = parseInt(book.value) - 1;
  book.value = newNumber;
}

<div class="range">
  <label>Book</label>
  <a href="#" onClick="sub()">subtract</a><input type="text" id="book" value="0" min="0"><a href="#" onClick="add()"> Add</a>
</div>

<div class="range">
  <label>Pen</label>
  <a href="#" onClick="sub()">subtract</a><input type="text" id="pen" value="0" min="0"><a href="#" onClick="add()"> Add</a>
</div>

How to use same function for different Id's?

I tried using "this" keyword for selecting a current Id but it didn't work... and i am trying do this in javascript only instead of jquery.

Nina Scholz · Accepted Answer · 2017-10-25 09:22:46Z

6

You could use the id as parameter for calling the functions. Inside take the value and convert it to number and if falsey, like NaN take a zero as value.

function add(id) {
    var element = document.getElementById(id),
        value = +element.value || 0;

    element.value = value + 1;
}

function sub(id) {
    var element = document.getElementById(id),
        value = +element.value || 0;

    value--;
    if (value < 0) {
        value = 0;
    }
    element.value = value;
}

<div class="range">
  <label>Book</label>
  <a href="#" onClick="sub('book')"><i class="fa fa-minus-circle" aria-hidden="true">-</i></a><input type="text" id="book" value="0" min="0">
  <a href="#" onClick="add('book')"><i class="fa fa-plus-circle" aria-hidden="true">+</i></a>
</div>

<div class="range">
  <label>Pen</label>
  <a href="#" onClick="sub('pen')"><i class="fa fa-minus-circle" aria-hidden="true">-</i></a><input type="text" id="pen" value="0" min="0">
  <a href="#" onClick="add('pen')"> <i class="fa fa-plus-circle" aria-hidden="true">+</i></a>
</div>

Input free version with an object as storage.

function add(id) {
    storage[id] = storage[id] || 0;
    document.getElementById(id).innerHTML = ++storage[id];
}

function sub(id) {
    storage[id] = storage[id] || 0;
    --storage[id];
    if (storage[id] < 0) {
        storage[id] = 0;
    }
    document.getElementById(id).innerHTML = storage[id];
}

var storage = {};

<label>Book</label> <a href="#" onClick="sub('book')">-</a> <span id="book">0</span> <a href="#" onClick="add('book')">+</a><br>
<label>Pen</label> <a href="#" onClick="sub('pen')">-</a> <span id="pen">0</span> <a href="#" onClick="add('pen')">+</i></a>

edited Oct 25, 2017 at 9:22

answered Oct 25, 2017 at 8:14

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Manjeshwar Over a year ago

element.value = +element.value + 1;Please explain this line. Thank You

Nina Scholz Over a year ago

no, because if the user enters some text, then it does not work and retuns NaN.

Nina Scholz Over a year ago

the plus is an unary plus which converts a string to a number, if possible or to NaN, not a number.

Manjeshwar Over a year ago

one more question. instead of using input tag can i use a div tag so that a user can't input a string. and how to do that?

Nina Scholz Over a year ago

in this case, i would store the value in an object with the same name of id as key and maintain the value in the object. Then instead of .value use .innerHTML for assignment.

Bhargav Chudasama · Accepted Answer · 2017-10-25 11:17:30Z

pass id name in function like add('book') or add('pen') and this use in function call in javascript

and also use txtNumber instead of book in java script

function add(id) {
  var txtNumber = document.getElementById(id);
  var newNumber = parseInt(txtNumber.value) + 1;
  txtNumber.value = newNumber;
}

function sub(id) {
  var txtNumber = document.getElementById(id);
  var newNumber = parseInt(txtNumber.value) - 1;
  txtNumber.value = newNumber;
}

<div class="range">
  <label>Book</label>
  <a href="#" onClick="sub('book')">subtract</a><input type="text" id="book" value="0" min="0"><a href="#" onClick="add('book')"> Add</a>
</div>

<div class="range">
  <label>Pen</label>
  <a href="#" onClick="sub('pen')">subtract</a><input type="text" id="pen" value="0" min="0"><a href="#" onClick="add('pen')"> Add</a>
</div>

Collectives™ on Stack Overflow

How to use same function for different Id's in JavaScript?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related