function to retry script element is not defined

I have a script that kinda runs but im not sure its correct.here at least the button works and does not throw out error first. Gives error

Error attaching event listener: ReferenceError: element is not defined

here is the code

<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>

However when I make it look nice it gives this error

Uncaught SyntaxError: missing formal parameter

Now everything looks good here whats going on im confused? Can anyone help I know its got to be something simple that im missing. I think it has to do with the parameters of the listener

<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>

Now i also tried like this but get a different error and this looks the best

Uncaught SyntaxError: unexpected token: '{

Here is the code

<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>

Solution

`ReferenceError: element is not defined`

In the tryAttachListener function, you're trying to use element.addEventListener without defining what element is. This causes a ReferenceError.

To fix this, replace element with the actual DOM element, in this case, document.getElementById("markerinfo").

`Uncaught SyntaxError: missing formal parameter`

In this snippet, you're using invalid syntax in your function definition:

function addEventListenerWithRetry('markerinfo', 'click', fillmark, retryInterval = 5000, maxRetries = 3) { ... }

Parameter names in JavaScript functions cannot be strings (e.g., 'markerinfo', 'click'). Strings are not valid identifiers.

Use valid parameter names, such as element, eventType, and callback.

`Uncaught SyntaxError: unexpected token: '{'`

This part of the code:

document.getElementById('markerinfo').addEventListener('markerinfo','click', fillmark, retryInterval = 20000, maxRetries = 3){

is not valid JavaScript. You’re mixing up function calls and function definitions:

addEventListener does not support passing parameters like retryInterval or maxRetries directly.
The { after this call is invalid syntax because it is not part of a function or block.