为什么该功能不会在点击时发出警报？答案

【问题标题】：Why the function doesn't alert onclick?为什么该功能不会在点击时发出警报？
【发布时间】：2021-08-18 07:51:53
【问题描述】：

我不太清楚为什么下面的代码在浏览器中不起作用。有什么想法吗？

<!DOCTYPE html>

<html>

<script>
  function click() {
    alert("You clicked on a paragraph");
  }
</script>

<body>
  <p onclick="click()" id="paragraph">This is a paragraph</p>
</body>

</html>

我想出了如何使用document.getElementById 函数完成上述操作（见下文）。

<!DOCTYPE html>

<html>

<script>
  function click() {
    alert("You clicked on a paragraph");
  }
</script>

<body>
  <p id="paragraph">This is a paragraph</p>
</body>

<script>
  document.getElementById("paragraph").onclick = function() {
    click();
  }
</script>

</html>

我的问题是为什么第一种方法不起作用？

【问题讨论】：

您可以在w3schools获取更多关于HTML、CSS和JS的信息。
问题是变量名。如果你把它改成function myClick(){} 这样就可以了。

标签： javascript onclick dom-events

【解决方案1】：

您的第一个函数不起作用，因为click() 是 JavaScript 中的一个内置函数，它模拟鼠标单击元素。这是demo。因此，当您单击段落时，首先执行内置函数，而不是通过alert() 函数显示消息的函数

由于您的第二个函数是 anonymous function，它的执行没有任何错误。

要解决它，只需将其重命名为除built-in function 名称之外的任何其他名称。比如下面的代码sn-p。

<!DOCTYPE html>

<html>

<body>
  <script>
      function alertOnclick() {
        alert("You clicked on a paragraph");
      }
  </script>
  <p onclick="alertOnclick()" id="paragraph">
    This is a paragraph
  </p>
</body>

</html>

【讨论】：

【解决方案2】：

查看您的代码@sb2021

我认为 @rifkyniyas

很好地解决了这个问题

但我想给你一个建议。尝试将脚本标记包含在正文标记关闭之前。将脚本放在元素的底部可以提高显示速度，因为脚本解释会减慢显示速度。

就是这样

<body>
.
.
.
.
.
.
<script>...</script>
</body>

Check this out

【讨论】：