Pass parameter depending on button click addEventListener

Question

I'm trying to create a function that will remove objects depending on button click value

But what I can't work out is how to pass a parameter using the addEventListener and I was also wondering if it's ok to use if else inside the filter function.

var Button1 = document.getElementById('button1');
Button1.addEventListener("click", removeBuild);

var Button2 = document.getElementById('button2');
Button2.addEventListener("click", removeBuild);

function removeBuild(buttonValue) {
  var builds = network.ui.build;
  Object.keys(builds).filter(function(e) {
    if (buttonValue == 1) {
      return document.querySelector(`input[value=${builds[e].type}]`).checked; // Return all checked checkboxes 
    } else {
      return "BlockStash" !== builds[e].type; // Return all - The BlockStash 
    }
  }).forEach(function(i) {
    network.sendRpc({
      name: "Remove",
      id: builds[i].id
    })
  })
}

buttons:

<button id="button1" style="width: 45%;" value="1">SELL CHECKED</button>
<br>
<button id="button2" style="width: 45%;" value="2">SELL ALL</button>

Answer 1

You can use a wrapper function to pass arguments to a the function

var Button1 = document.getElementById('button1');
Button1.addEventListener("click",() => removeBuild(1));

var Button2 = document.getElementById('button2');
Button2.addEventListener("click",() => removeBuild(2));

Its ok to use if else inside filter() but I would rather create an object of functions.

function removeBuild(buttonValue) {

  var builds = network.ui.build;
  const obj = {
     1:e => document.querySelector(`input[value=${builds[e].type}]`).checked,
     2:e => "BlockStash" !== builds[e].type;
  }
  Object.keys(builds).filter(e => obj[buttonValue](e)).forEach(function(i) {
    network.sendRpc({
      name: "Remove",
      id: builds[i].id
    })
  })
}

Answer 2

removeBuild will receive an Event as it's first parameter. You need to extract the originalTarget from the event:

function removeBuild(evt) {
  const element = evt.originalTarget;
  ...
  if (element.value === '1') {
    ....
  }
  ...
}

Answer 3

The first parameter passed to the handler will be the click event, which has a target property, which will refer to the clicked element. So, you can just extract the value from the target .

Note that the value of a button will be a string, not a number.

 console.log(typeof document.querySelector('#button1').value); 

 <button id="button1" style="width: 45%;" value="1">SELL CHECKED</button> 

You can also use Object.values instead of Object.keys to reduce a lot of the syntax noise:

function removeBuild(event) {
  const buttonValue = event.target.value;
  var builds = network.ui.build;
  Object.values(builds).filter(function(val) {
    if (buttonValue === '1') {
      return document.querySelector(`input[value=${val.type}]`).checked; // Return all checked checkboxes 
    } else {
      return "BlockStash" !== val.type; // Return all - The BlockStash 
    }
  }).forEach(function(val) {
    network.sendRpc({
      name: "Remove",
      id: val.id
    })
  })
}