Question

我在下面的代码中有三种形式。第一种形式可以通过日期，但是其他两种形式都不能通过日期。只要其他形式是第一个调用的形式，其他形式就可以正常工作。所以问题是为什么我只能在页面上以一种形式使用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>

Answer 1

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>

Answer 2

正如每个人所说：id必须是唯一的。如果要定位多个元素，请使用类。但是（作为一个有趣的事实），有一种方法可以通过限制搜索范围来定位具有相同id的多个元素：

const forms = Array.from(document.querySelectorAll("form"));
Array.from(document.querySelectorAll(`[type="hidden"]`)).forEach(el => el.type = "text");

forms.forEach(form => form.addEventListener("submit", e => e.preventDefault()));

<script>

function ShowLocalDate(el){
var dNow = new Date();
var localdate= '['+(dNow.getMonth()+1) + ']<' + dNow.getDate() + '>!' 
+ dNow.getFullYear() + '!-' + dNow.getHours() + '-:' + 
dNow.getMinutes() + ':';
el.parentElement.querySelector("#createdAtInput").value = localdate; // search for the id within a form
}

</script>

<body >

<!-- form below works -->
<form action="history_report.php" method="post">
<input type="hidden" id="createdAtInput" name="php_client_date" />
<button onclick="ShowLocalDate(this)" type="submit" >X-fer Date</button>
</form>

<!--  does not work -->
<form action="history_report.php" method="post">
<input type="hidden" id="createdAtInput" name="php_client_date" />
<button onclick="ShowLocalDate(this)" type="submit" >X-fer Date</button>
</form>

<!-- does not work -->
<form action="modify_refund_script.php" method="post">
<input type="hidden" id="createdAtInput" name="php_client_date" />
<button onclick="ShowLocalDate(this)" type="submit" >X-fer Date</button>
</form>

为什么onclick =“ ShowLocalDate（）”只工作一次，遇到的第一个

2 个答案: