Функция JavaScript не вызывается при нажатии кнопки HTML

У меня есть файл JavaScript с функцией «AddCenter (e)», которая вызывается одним нажатием кнопки, но ничего не происходит. Может кто-нибудь мне помочь?
Для получения дополнительной информации я использую проект node.js, экспресс-сервер и онлайн-среду IDE под названием: Replit. Вот адрес сайта: replit.com

РЕДАКТИРОВАТЬ: Итак, я изменил все, как вы, ребята, предложили, но все равно ничего не происходит.
Вот ссылка на часть веб-сайта: Ссылка на веб-сайт
Таким образом, URL-адрес должен измениться с: https://worldsportcenters.xxgamecodingxx.repl.co/api/v1/im на: https://worldsportcenters.xxgamecodingxx.repl.co/

Но вместо этого он переходит на тот же URL, но добавляет ? в конце: https://worldsportcenters.xxgamecodingxx.repl.co/api/v1/im ?

Кто-нибудь знает почему ???

Вот мой файл JavaScript:

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+:\[email protected])?([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();
});

HTML-файл:

<!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>
# button function
Источник
  • 0
    setInterval(function() { window.close(); }, 1000) пытается закрыть окно каждую секунду. Я бы подумал, что было бы достаточно использовать setTimeout чтобы сделать это один раз, поскольку после закрытия окна интервал больше не будет выполняться.
Codelisting
за 1 против

onclick="AddCenter"

Ценностьonclick Атрибут - это тело функции для обработчика событий.

Это примерно эквивалентно:

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

Если вы хотите вызвать функцию, вам нужно сделать это с помощью( затем любые аргументы, которые вы хотите передать, затем) .


Тем не менее, используйтеaddEventListener , внутренние атрибуты событий имеют некоторые недостатки и не очень хорошо разделяют проблемы.

Codelisting
Популярные категории
На заметку программисту