Element becomes undefined when passed to function JavaScript

Question

I am passing a node as a parameter to a JavaScript function. This node is a button. Outside the function, I can access the button's value. I added a 'click' event listener to this button. It calls the function selectTips and passes the node as a parameter. Inside this function, the node becomes undefined and therefore can't access its value. Can someone explain why this is happening, please?

  var percentTips=0;
  var bill = 0;

  var tipsButtons = document.getElementsByTagName("button");

  for (var i = 0; i<tipsButtons.length; i++){
    tipsButtons[i].addEventListener("click",function(){selectTips(tipsButtons[i])}, false);
    console.log(tipsButtons[i].value); //here the value appears on the console with no errors
  }
  

  function selectTips(elt){
    percentTips=elt.value;
    elt.style.backgroundColor="rgb(159, 232, 223)";
    elt.style.color="hsl(183, 100%, 15%)";
    const tipsButtons = document.getElementsByTagName("button");
    for (var i = 0; i<tipsButtons.length; i++){
      if (tipsButtons[i]!=elt){
        tipsButtons[i].style.backgroundColor="hsl(183, 100%, 15%)";
        tipsButtons[i].style.color="white";
      }
    }
    console.log(percentTips);
  }