How do I simplify my code by making one addAndSubtract function?

notwo 0
Viewed 43

Like the title says, I would like to simplify this JavaScript so that I have one addAndSubtract function for the buttons.

I am quite new and I have no idea how to go about it.

Here is the code:

let add= document.querySelector("#add");
let subtract = document.querySelector("#subtract");

add.addEventListener("click",function(){
let output = document.querySelector("#output");
let result = Number(output.innerText) + 1;
if (result >10){
    result = 10;
}

output.innerText = result;
});


subtract.addEventListener("click",function(){
let output = document.querySelector("#output")
let result = Number(output.innerText) - 1;

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

output.innerText = result;
});
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script defer src="script.js"></script>
    <title>Counter</title>
</head>
<body>
    <h1>Le Count!</h1>
    <div class = "Counter_Container">
        <button id="subtract">-</button><span id="output">0</span><button id="add">+</button>
    </div>
</body>
</html>

javascript html
4 Answers

You can read the ID of the button being clicked in the handler, and act accordingly. (The switch could be a series of ifs too.)

function handleClick(event) {
  const action = event.target.id;
  const output = document.querySelector("#output");
  let value = parseInt(output.innerText);
  switch (action) {
    case "add":
      value++;
      break;
    case "subtract":
      value--;
      break;
  }
  value = Math.min(10, Math.max(value, 0)); // clamp to 0..10
  output.innerText = value;
}

document.querySelector("#subtract").addEventListener("click", handleClick);
document.querySelector("#add").addEventListener("click", handleClick);
<h1>Le Count!</h1>
<div class="Counter_Container">
  <button id="subtract">-</button><span id="output">0</span><button id="add">+</button>
</div>

AKX0

You need to create a function as following

function operation(val,maxvalue,minvalue){
let output = document.querySelector("#output")
let result = Number(output.innerText) + val;

if (result<minvalue){
    result=minvalue;
}
if (result>maxvalue){
    result=maxvalue;
}

output.innerText = result;

}

And use as below

let subtract = document.querySelector("#subtract");

subtract.addEventListener("click",operation.bind(this,-1,10,0))

let add = document.querySelector("#add");

add.addEventListener("click",operation.bind(this,1,10,0))

Let me know if you face any issue

Vikas Prabhu0

Create a single function which takes your result number and add/subtract as parameter.

    function eventer(result_param, arithmat){
            let output = document.querySelector("#output")
            if(arithmat){
             let result = Number(output.innerText) + 1;
            }else{
             let result = Number(output.innerText) - 1;
}
            if (result<result_param){
                result=0;
            }
        }

Always try to make your similar code converted to reusable functions and if_else to ternary operators.

user24532170

Just add a data attribute to each button that describes the operation that should be performed. Use the same click handler and check the attribute for which operation should be performed.

It's also easier to keep track of the value in a scoped variable too.

let value = 0;
const output = document.querySelector("#output");
const buttons = document.querySelectorAll(".operation");

const operations = {
  add: () => value = Math.min(++value, 10),
  subtract: () => value = Math.max(--value, 0)
};

const setOutput = () => {
  output.innerText = value;
};

// set initial output value
setOutput();

[...buttons].forEach((button) => {
  button.addEventListener('click', (e) => {
    const operation = e.target.dataset.operation;

    let func = operations[operation];
    func && func();

    setOutput();
  });
});
<h1>Le Count!</h1>
<div class="Counter_Container">
  <button id="subtract" class="operation" data-operation="subtract">-</button>
  <span id="output"></span>
  <button id="add" class="operation" data-operation="add">+</button>
  <button id="multiply" class="operation" data-operation="multiply">*</button>
</div>

phuzi0
Related