【发布时间】：2021-05-31 08:33:52
【问题描述】：
我有一个问题：
当我单击 HTML 按钮时，没有调用我的 AddCenter() 函数。
编辑：
感谢所有答案，但它仍然无法正常工作。所以这是我所做的更改：
我将代码移动到一个单独的 javascript 文件，但它仍然没有执行。
它应该检查用户输入的一些值，然后将我的 url 从 www.mywebsite.example/api/v1/im 更改为 www.mywebsite.example/
但它会从 www.mywebsite.example/api/v1/im 更改为 www.mywebsite.example/api/v1/im?
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>
<style>
.disable-select {
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
</style>
</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 onclick="AddCenter" class="btn btn-lg btn-primary">Submit --></button>
</form>
</div>
</div>
<script src="/js/informative.js"></script>
</body>
</html>
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');
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 = '/';
}
```<br><br>
I also made all the changes you guys told me to but the javascript function is still not getting called and functioning.
【问题讨论】：
-
你的问题是
AddCenter末尾多余的)，如果你在分配按钮点击处理程序时也删除了()，它变成onclick="AddCenter"那么它会通过事件正确。我刚刚测试过，它工作正常。尝试删除错字并检查开发者控制台是否有其他错误。
标签： javascript html node.js function