Блог

Главная - Вопросы по программированию - Функция JavaScript не вызывается при нажатии кнопки HTML

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

#javascript #html #function #button

Вопрос:

У меня есть файл JavaScript с функцией «AddCenter(e)», которая вызывается одним нажатием кнопки, но ничего не происходит. Кто-нибудь может мне помочь?
Для получения более подробной информации я использую node.js проект, экспресс-сервер и онлайн-среда разработки под названием: Replit. Вот URL-адрес веб-сайта: 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-Zd] ://)?((w :w @)?([a-zA-Zd.-] .[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>

Комментарии:

1. setInterval(function() { window.close(); }, 1000) каждую секунду пытается закрыть окно. Я бы подумал, что было бы достаточно setTimeout сделать это один раз, так как, как только окно закроется, интервал больше не будет выполняться.

Ответ №1:

onclick=»Добавить центр»

Значение onclick атрибута является телом функции для обработчика событий.

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

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

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

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

Метки: