下面的代码中有三种形式。第一种形式可以很好地传递日期，但其他两种形式不能传递日期。其他形式只要是第一个调用的形式就可以正常工作。所以问题是为什么我只能在页面上以一种形式使用 onclick 函数。调用第一个 onclick 后，所有其他 onclick 都将被忽略。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Profile</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
var buttons = document.querySelectorAll('form');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('submit', ShowLocalDate);
}
function ShowLocalDate() {
event.preventDefault();
var dNow = new Date();
var localdate = '[' + (dNow.getMonth() + 1) + ']<' + dNow.getDate() + '>!' +
dNow.getFullYear() + '!-' + dNow.getHours() + '-:' +
dNow.getMinutes() + ':';
event.target.querySelector(".createdAtInput").value = localdate;
event.target.submit();
}
</script>
</head>
<body>
<!-- form below works -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="modify_refund_script.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
</body>
</html>
最佳答案
id 属性在同一文档中必须是唯一的，使用常见类替换一次重复项，例如:
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
最好避免使用内联事件onClick并尝试使用addEventListener()将事件附加到JS代码中> 喜欢:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Profile</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', ShowLocalDate);
}
});
function ShowLocalDate() {
event.preventDefault();
var dNow = new Date();
var localdate = '[' + (dNow.getMonth() + 1) + ']<' + dNow.getDate() + '>!' +
dNow.getFullYear() + '!-' + dNow.getHours() + '-:' +
dNow.getMinutes() + ':';
event.target.querySelector(".createdAtInput").value = localdate;
event.target.submit();
}
</script>
</head>
<body>
<!-- form below works -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="modify_refund_script.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
</body>
</html>关于javascript - 为什么 onclick ="ShowLocalDate()"只工作一次，它遇到的第一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52447130/