CODEWITHSUNDEEP
javascript
Hannah Matthewson
Hannah Matthewson

Reputation: 51

How to create a counter with a plus and minus button which passes a parameter so that I don't have two use two separate functions?

I have created a counter with a plus and minus button. The counter works fine but I would like to simplify my code by passing a parameter to my function that performs both the plus and minus calculations depending on which button is clicked. At the moment I have two separate functions doing this but I would like to pass the 'result' variable as this is the part that tells my script whether I want to add 1 or minus 1, however I am unsure on how to do this?

I have attached my JavaScript below to show what I have so far.

document.getElementById('minus').onclick = function() {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result = parsed -1;
    document.getElementById('counter').innerHTML = result;
}

document.getElementById('plus').onclick = function() {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result = parsed +1;
    document.getElementById('counter').innerHTML = result;
}

Upvotes: 3

Views: 2211

Answers (7)

SerShubham
SerShubham

Reputation: 883

You could use curried functions.

The following should make your code simple and as required:

function getCounter(multiplier = 1) {
    return function () {
       var counter = document.getElementById('counter').innerHTML;
       var parsed = parseInt(counter);
       var result = parsed + (multiplier * 1);
       document.getElementById('counter').innerHTML = result;
    }
}

document.getElementById('minus').onclick = getCounter(-1);

document.getElementById('plus').onclick = getCounter(); // 1 is the default value

Curried functions are basically, functions that return another function. The inner functions have access to the variables defined in the wrapping function. read more about them here: https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983

Upvotes: 1

André Reichelt
André Reichelt

Reputation: 1631

You can use the first and only parameter of the click handler, to get the ID of the element. Then use a ternary command to decide, if the result should be incremented or decremented.

function clickHandler(e) {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result = e.target.id === 'plus' ? parsed + 1 : parsed - 1;
    document.getElementById('counter').innerHTML = result;
}

document.getElementById('minus').onclick = clickHandler;
document.getElementById('plus').onclick = clickHandler;

You could also rewrite the method to use an if instead of the result variable.

Here's what I would consider an optimized version:

const counterElem = document.getElementById('counter');

function clickHandler(e) {
    counterElem.innerHTML =
        parseInt(counterElem.innerHTML) +
        (e.target.id === 'plus' ? 1 : -1);
}

document.getElementById('minus').onclick = clickHandler;
document.getElementById('plus').onclick = clickHandler;

Upvotes: 1

ArulPrasath A M
ArulPrasath A M

Reputation: 51

  1. In Button tag call the below method in OnClick event
  2. In 'action' parameter , pass the button value as '+' or '-'.

Eg : <button type='button' onClick='return CounterUpdate("+")'>+</Button>

function CounterUpdate(action) {
    var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
    var result =parsed ;
    if(action=='+')
    {
      result = parsed +1;
    }
    else if(action=='-')
    {
      result = parsed -1;
    }
    document.getElementById('counter').innerHTML = result;
}

Upvotes: 0

rahul nirfarake
rahul nirfarake

Reputation: 47

I have modified your code to a function, you just need to use that function on the event you want.

function counterFunction(action) {
 var counter = document.getElementById('counter').innerHTML;
 var parsed = parseInt(counter);
 var result = '';
  if (action == 'minus') {
    result = parsed -1;
  }
  else if (action == 'plus') {
    result = parsed +1;
  }
  document.getElementById('counter').innerHTML = result;
}

If you need any help please let me know.

Upvotes: 0

Ryan Wilson
Ryan Wilson

Reputation: 10765

You can use the same function to modify the counter element and then just pass a negative or positive integer as the parameter to the function, like so:

document.getElementById('minus').onclick = modifyCount(-1);

document.getElementById('plus').onclick = modifyCount(1); 

//Just pass the integer into the function to modify the counter element
function modifyCount(val){
    const counter = document.getElementById('counter');
    counter.innerHTML = parseInt(counter.innerHTML) + val;
}

Upvotes: 3

Tom Marienfeld
Tom Marienfeld

Reputation: 716

Possible solution with onclick event:

  function count(clicked_id)
  {
  var counter = document.getElementById('counter').innerHTML;
    var parsed = parseInt(counter);
      let result = clicked_id == "minus" ? parsed - 1 : parsed + 1;
      document.getElementById('counter').innerHTML = result;
  }
<button onclick="count(this.id)" id="minus">-</button>
<div id="counter">0</div>
<button onclick="count(this.id)" id="plus">+</button>

Upvotes: 1

Ned Howley
Ned Howley

Reputation: 858

You can make a curried function to "bake" your delta value into the click handlers:

function changeCount(delta) {
   return function () {
       var counter = document.getElementById('counter').innerHTML;
       var parsed = parseInt(counter);
       var result = parsed + delta;
       document.getElementById('counter').innerHTML = result;
   } 
}

document.getElementById('minus').onclick = changeCount(-1);
document.getElementById('plus').onclick = changeCount(1);

Upvotes: 3

Related Questions