addEventListener doesn't work with default paramaters

Question

Why do functions with default parameters not work if i call the function with addEventListener?

This example function below generates some random strings, and i called the function by using onclick() in the html file, which perfectly works

const notationGraph = {
  "U": ["L", "R", "F", "B"],
  "D": ["L", "R", "F", "B"],
  "L": ["U", "D", "F", "B"],
  "R": ["U", "D", "F", "B"],
  "F": ["U", "D", "L", "R"],
  "B": ["U", "D", "L", "R"],
};

const switches = ["", "\'", "2"]; 

function randItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function generate3x3(Min = 20, Max = 25) {
  let scrambles = []; 
  let prev;
  const len = Math.floor(Math.random() * (Max - Min + 1) + Min);
  for (let i=0; i<len; i++) {
    let notation = randItem(prev ? notationGraph[prev] : Object.keys(notationGraph));
    let swtch = randItem(switches);
    scrambles.push(`${notation}${swtch}`);
    prev = notation;
  }
  console.log(scrambles.join(" "));
}

<button id="buttonTest" onclick="generate3x3()">test button</button>

But with the addEventListener method, it does not work and console.logs empty strings

const notationGraph = {
  "U": ["L", "R", "F", "B"],
  "D": ["L", "R", "F", "B"],
  "L": ["U", "D", "F", "B"],
  "R": ["U", "D", "F", "B"],
  "F": ["U", "D", "L", "R"],
  "B": ["U", "D", "L", "R"],
};

const switches = ["", "\'", "2"]; 

function randItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function generate3x3(Min = 20, Max = 25) {
  let scrambles = []; 
  let prev;
  const len = Math.floor(Math.random() * (Max - Min + 1) + Min);
  for (let i=0; i<len; i++) {
    let notation = randItem(prev ? notationGraph[prev] : Object.keys(notationGraph));
    let swtch = randItem(switches);
    scrambles.push(`${notation}${swtch}`);
    prev = notation;
  }
  console.log(scrambles.join(" "));
}
document.getElementById("buttonTest").addEventListener("click", generate3x3)

<button id="buttonTest">test button</button>

I'm wondering why doesn't it work, what am i doing wrong?

Answer 1

Because the event passed in the eventListener is overwriting your first default parameter

EITHER add the event to the function as the first parameter

function generate3x3(event, Min = 20, Max = 25) {

OR call it like this

document.getElementById("buttonTest").addEventListener("click",function() {
  generate3x3();
})

const notationGraph = {
  "U": ["L", "R", "F", "B"],
  "D": ["L", "R", "F", "B"],
  "L": ["U", "D", "F", "B"],
  "R": ["U", "D", "F", "B"],
  "F": ["U", "D", "L", "R"],
  "B": ["U", "D", "L", "R"],
};

const switches = ["", "\'", "2"]; 

function randItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function generate3x3(Min = 20, Max = 25) {
  let scrambles = []; 
  let prev;
  const len = Math.floor(Math.random() * (Max - Min + 1) + Min);
  for (let i=0; i<len; i++) {
    let notation = randItem(prev ? notationGraph[prev] : Object.keys(notationGraph));
    let swtch = randItem(switches);
    scrambles.push(`${notation}${swtch}`);
    prev = notation;
  }
  console.log(scrambles.join(" "));
}

document.getElementById("buttonTest").addEventListener("click",function() {
  generate3x3()
})

<button id="buttonTest">test button</button>