带重试机制的事件监听函数多报错问题排查求助

我现在写了一个带重试逻辑的事件监听脚本，想要给页面按钮绑定点击事件，但折腾了好几个版本都报各种错误，感觉问题出在参数传递或者函数定义上，但就是没找到根源，求各位大佬帮忙看看！

第一个版本：引用未定义变量报错 #

按钮能正常显示，但点击后控制台输出错误：

Error attaching event listener: ReferenceError: element is not defined

对应的代码：

<html>
<head>
<title>test function</title>
</head>
<body>
                 
<input type="button" id="markerinfo" name="next" class="next" value="ALMOST DONE" />
<script>
document.getElementById("markerinfo").addEventListener("click", addEventListenerWithRetry);
function addEventListenerWithRetry(markerinfo, click, fillmark, retryInterval = 5000, maxRetries = 3){
  let retries = 0;

  function tryAttachListener() {
    try {
      element.addEventListener(click, fillmark);
      console.log('Event listener attached successfully.');
    } catch (error) {
      console.error('Error attaching event listener:', error);

      if (retries < maxRetries) {
        retries++;
        console.log(`Retrying in ${retryInterval / 1000} seconds...`);
        setTimeout(tryAttachListener, retryInterval);
      } else {
        console.error('Max retries reached. Event listener not attached.');
      }
    }
  }

  tryAttachListener();

}

//document.getElementById("markerinfo").addEventListener("click", fillmark);
function fillmark() {
console.error('It working!');
}
</script>
</body>
</html>

第二个版本：函数参数语法错误 #

我调整了函数参数的写法，结果直接触发语法错误：

Uncaught SyntaxError: missing formal parameter

对应的代码：

<html>
<head>
<title>test function</title>
</head>
<body>
                 
<input type="button" id="markerinfo" name="next" class="next" value="ALMOST DONE" />
<script>
document.getElementById("markerinfo").addEventListener("click", addEventListenerWithRetry);
function addEventListenerWithRetry('markerinfo','click', fillmark, retryInterval = 5000, maxRetries = 3){
  let retries = 0;

  function tryAttachListener() {
    try {
      element.addEventListener('click', fillmark);
      console.log('Event listener attached successfully.');
    } catch (error) {
      console.error('Error attaching event listener:', error);

      if (retries < maxRetries) {
        retries++;
        console.log(`Retrying in ${retryInterval / 1000} seconds...`);
        setTimeout(tryAttachListener, retryInterval);
      } else {
        console.error('Max retries reached. Event listener not attached.');
      }
    }
  }

  tryAttachListener();

}

//document.getElementById("markerinfo").addEventListener("click", fillmark);
function fillmark() {
  console.error('It working!');
}
</script>
</body>
</html>

第三个版本：语法结构错误 #

我又尝试了另一种写法，结果还是报语法错误：

Uncaught SyntaxError: unexpected token: '{'

对应的代码：

<html>
<head>
<title>test function</title>
</head>
<body>
                 
<input type="button" id="markerinfo" name="next" class="next" value="ALMOST DONE" />
<script>
document.getElementById('markerinfo').addEventListener('markerinfo','click', fillmark, retryInterval = 20000, maxRetries = 3){
  let retries = 0;

  function tryAttachListener() {
    try {
      element.addEventListener('click', fillmark);
      console.log('Event listener attached successfully.');
    } catch (error) {
      console.error('Error attaching event listener:', error);

      if (retries < maxRetries) {
        retries++;
        console.log(`Retrying in ${retryInterval / 1000} seconds...`);
        setTimeout(tryAttachListener, retryInterval);
      } else {
        console.error('Max retries reached. Event listener not attached.');
      }
    }
  }

  tryAttachListener();

}

//document.getElementById("markerinfo").addEventListener("click", fillmark);
function fillmark() {
  console.error('It working!');
}
</script>
</body>
</html>

其实我的需求很简单：给指定按钮绑定一个点击事件，并且在绑定失败时能自动重试几次，最终触发fillmark函数就行，但试了这么多写法都不对，有没有大佬能帮我指出问题所在，或者给一个正确的参考写法？

备注：内容来源于stack exchange，提问作者qwertyyuiop