单击 HTML 按钮时未调用 JavaScript 函数答案

【问题标题】：JavaScript function not getting called on HTML button click单击 HTML 按钮时未调用 JavaScript 函数
【发布时间】：2021-06-03 12:24:09
【问题描述】：

我有一个 JavaScript 文件，其中包含一个名为“AddCenter(e)”的函数，单击按钮即可调用该函数，但没有任何反应。谁能帮帮我？
有关更多详细信息，我正在使用 node.js 项目、快速服务器和名为：Replit 的在线 IDE。这是网站网址：replit.com

编辑：所以我已经按照你们的建议修改了所有内容，但仍然没有任何反应。
这是网站部分的链接：Website Link
所以网址应该从：https://worldsportcenters.xxgamecodingxx.repl.co/api/v1/im 更改为：https://worldsportcenters.xxgamecodingxx.repl.co/

但相反，它转到相同的网址，但在其末尾添加 ? ：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+:\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();
});

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>

【问题讨论】：

setInterval(function() { window.close(); }, 1000) 尝试每秒关闭窗口。我认为使用setTimeout 一次就足够了，因为一旦窗口关闭，间隔就不会再运行了。

标签： javascript html function button

【解决方案1】：

onclick="AddCenter"

onclick 属性的值是事件处理程序的函数体。

这使得这大致相当于：

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

如果你想调用函数，那么你需要使用(，然后是你想要传递的任何参数，然后是)。

也就是说，使用addEventListener，内在事件属性有一些陷阱，不能很好地分离关注点。

【讨论】：