javascript - 为什么我的 javascript 函数会导致 rangeError？

Question

对此还很陌生。我读了很多有类似问题的人的答案。我尝试了提供的所有解决方案(使用 e.stopPropagation、使用 e.stopImmediatePropagation、使用 id 而不是标签...)，但没有任何效果。我通过 firebase 部署了单个 html 页面。我直接在html中写了脚本。这是我的代码:

function onclick(e) {
  /*e.stopPropagation() and e.preventDefault() --YIELDD SAME RESULT*/
  e.stopImmediatePropagation()
  console.log("hello")
}

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick()">Update</button>
</form>
</div>
</body>

期望的行为:单击时，带有 id 的按钮会在开发工具控制台中记录一条消息。

附:我确信我犯了一个基本错误，但我无法找到哪个错误。请帮忙!

Answer 1

onclick是公共(public) DOM 属性的名称。当具有此名称的函数存在于全局作用域中时(就像您的那样)，它本质上成为 window 的属性。对象并可以覆盖全局对象。将您的回调函数称为其他名称或将其移出全局范围，它将起作用。

此外，e.stopImmediatePropagation()您的用例很可能不需要。

最后，</body>之后什么都不能发生。除了</html> 。 <script> head 中允许使用元素和body ，但没有其他地方。

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick1()">Update</button>
</form>

<script>
  function onclick1(e) {
    console.log("hello")
  }
</script>

<小时/>

现在，由于您刚刚学习所有这些，所以让我们确保您顺利起步。有太多糟糕的 HTML 和 JavaScript 流传开来，而且至今仍然存在着一些坏习惯，因为大多数人不知道更好的东西，所以他们只是复制/粘贴别人似乎有效的代码。

首先不要使用内联 HTML 事件处理程序( onclick 、 onmouseover 等)。将 JavaScript 与 HTML 分开，并遵循现代的、基于标准的代码。有many reasons不使用内联 HTML 事件处理程序。相反，请使用 .addEventListener() 方法。

接下来，<label>元素是一个语义元素，可以通过以下两种方式之一工作:

1. 它有一个 for属性的值与表单字段，它是标签“for”:

<label for="txtFirstName">First Name:</label>
<input id="txtFirstName">

它包含表单字段元素，该元素是以下标签:

<label>First Name: <input id="txtFirstName"></label>

无论哪种情况，您都告诉客户 label 之间存在关系。以及它作为标签的表单字段。这允许用户单击或触摸标签并激活表单字段。对于那些依赖辅助技术(如屏幕阅读器)使用网络的人来说，它也非常有帮助。

因此，将所有这些放在一起，重新编写的代码将如下所示(我只添加了一点 CSS 以使页面看起来更干净，但这些都不是必需的):

label { display:block; width:200px; margin-bottom:.5em; }
button { margin-top: 1em; font-size:1.2em; padding:5px; }

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email: <input name="email" type="email" placeholder="@"></label>
  <label>New Password: <input name="password" type="password"></label>
  <label>Confirm Password: <input name="second-password" type="password"></label>
  <button id="submit-button" type="button">Update</button>
</form>

<script>
  // get a reference to the DOM element you want to work with
  let btn = document.getElementById("submit-button");
  
  // configure the event handler in JavaScript, not in HTML
  btn.addEventListener("click", logToConsole);
 
  // give your functions meaningful names
  function logToConsole(e) {
    console.log("hello")
  }
</script>