如何在HTML中调用JavaScript函数

在HTML中调用JavaScript函数是Web开发中常见的需求。下面，我们将介绍3种在HTML中调用JavaScript函数的方法。

方法1：使用onclick属性

使用onclick属性可以在HTML元素上注册一个事件处理程序，并在单击该元素时调用JavaScript函数。

以下示例演示如何在按钮上注册onclick事件处理程序。

<button onclick="showMessage()">点击我</button>

<script>
function showMessage() {
  alert('Hello World!');
}
</script>

在单击按钮时，会显示一个对话框，其中包含消息“Hello World!”。

方法2：使用addEventListener()方法

使用addEventListener()方法可以在JavaScript代码中注册事件处理程序，并在特定事件发生时调用JavaScript函数。

以下示例演示如何在按钮上注册click事件处理程序。

<button id="myButton">点击我</button>

<script>
document.getElementById('myButton').addEventListener('click', showMessage);

function showMessage() {
  alert('Hello World!');
}
</script>

在单击按钮时，会显示一个对话框，其中包含消息“Hello World!”。

方法3：使用HTML DOM

使用HTML DOM可以直接从JavaScript代码中访问HTML元素，并调用JavaScript函数。

以下示例演示如何从JavaScript代码中访问按钮，并在单击按钮时调用showMessage()函数。

<button id="myButton">点击我</button>

<script>
document.getElementById('myButton').onclick = function() {
  showMessage();
};

function showMessage() {
  alert('Hello World!');
}
</script>

在单击按钮时，会显示一个对话框，其中包含消息“Hello World!”。

以上就是在HTML中调用JavaScript函数的3种方法。无论使用哪种方法，只要遵循JavaScript的语法规则，就可以实现所需的功能。

注意： 在HTML中调用JavaScript函数时，一定要确保JavaScript代码在HTML代码之后加载，否则将无法正确地使用JavaScript函数。