JavaScript function not getting called on HTML button click

Question

I have a JavaScript file with a function called "AddCenter(e)" that is called on the click of a button but nothing happens. Can anyone help me?
For some more details, I am using a node.js project, an express server and on online IDE called: Replit. Here is the website url: replit.com

EDIT : So I have modified everything like you guys suggested but still nothing happens.
Here is the link to the part of the website : Website Link
So the url is supposed to change from : https://worldsportcenters.xxgamecodingxx.repl.co/api/v1/im to : https://worldsportcenters.xxgamecodingxx.repl.co/

But instead it goes to the same url but adds a ? at the end of it : https://worldsportcenters.xxgamecodingxx.repl.co/api/v1/im?

Does anyone know why ???

Here is my JavaScript file :

const centers = require('../../models/Center');
const centerName = document.getElementById('center-name');
const centerAddress = document.getElementById('center-address');
const centerDescription = document.getElementById('center-description');
const key = document.getElementById('dev-key');
const submitButton = document.getElementById('submit-button');

function CheckForURL(str)
{
  let reg = new RegExp('([a-zA-Z\d]+://)?((\w+:\w+@)?([a-zA-Z\d.-]+\.[A-Za-z]{2,4})(:\d+)?(/.*)?)', 'i')
  return reg.test(str)
}

async function AddCenter(e)
{
  e.preventDefault();

  if (centerName.value === '') return alert('Please fill in the "Sport Center Name" field');
  else if (centerAddress.value === '') return alert('Please fill in the "Sport Center Address" field');
  else if (centerDescription.value === '') return alert('Please fill in the "Sport Center Description" field');
  else if (key.value === '') return alert('Please fill in the "Developper Key" field');
  else if (CheckForURL(centerDescription.value)) return alert('You can not put a url in the free marker "Sport Center Description" field');
  else if (key.value !== process.env['DEVELOPER_KEY'])
  {
    alert('You filled in the wrong KEY in the "Sport Center Description" field, and this window will self destruct in 10 seconds');
    var timer = setInterval(function() { 
      window.close();
    }, 10000);
    return;
  }

  centers.create({
    type: 'informative',
    name: centerName.value,
    address: centerAddress.value,
    description: centerDescription.value
  });

  if (res.status === 400)
  {
    throw Error('That sport center already exists !');
  }

  alert('Center added !');
  window.location.href = '/';
}

submitButton.addEventListener("click", function ()
{
  AddCenter();
});

The HTML file :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet",
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
      crossorigin="anonymous"
    />
    <title>World Sport Center - Add Center</title>
    <link rel="stylesheet" href="/css/main.css" />
  </head>

  <body>
    <div class="text-center">
      <div class="container my-3">
        <h1 class="display-4 text-center disable-select">Add Informative Marker</h1>
        <form id="center-form" class="mb-4">
          <div class="form-group">
            <blockquote class="blockquote">
              <p class="mb-0 disable-select">Sport Center Name</p>
            </blockquote>
            <input type="text" id="center-name" class="form-control" />
          </div>
          <div class="form-group">
            <blockquote class="blockquote">
              <p class="mb-0 disable-select">Sport Center Address</p>
            </blockquote>
            <input type="text" id="center-address" class="form-control" />
          </div>
          <div class="form-group">
            <blockquote class="blockquote">
              <p class="mb-0 disable-select">Sport Center Description</p>
            </blockquote>
            <textarea type="text" rows="2" id="center-description" class="form-control" maxlength="150"></textarea>
          </div>
          <div class="form-group">
            <blockquote class="blockquote">
              <p class="mb-0 disable-select">Developper Key</p>
            </blockquote>
            <input type="text" id="dev-key" class="form-control" />
          </div>
          <a href="/api/v1/add" class="btn btn-outline-primary btn-lg"><-- Back</a>
          <button id="submit-button" class="btn btn-lg btn-primary">Submit --></button>
        </form>
      </div>
    </div>
    <script src="/js/informative.js"></script>
  </body>
</html>

setInterval(function() { window.close(); }, 1000) tries to close the window every second. I would think it would be sufficient to use setTimeout to do it once, since once the window closes, the interval's not going to run anymore. — Heretic Monkey
– Heretic Monkey, Commented Jun 3, 2021 at 12:38

Quentin · Accepted Answer · 2021-06-03 12:27:30Z

1

onclick="AddCenter"

The value of an onclick attribute is the function body for the event handler.

That makes this, roughly, equivalent to:

theElement.addEventListener("click", function () {
    AddCenter;
});

If you want to call the function then you need to do so with ( then any arguments you want to pass, then ).

That said, use addEventListener, intrinsic event attributes have some gotchas and don't separate concerns very well.

answered Jun 3, 2021 at 12:27

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript function not getting called on HTML button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related