数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在HTML中调用JavaScript函数？
在本文中，我们将探讨从HTML模板调用和初始化JavaScript函数。我们需要JavaScript函数来对传递的输入执行所需的方法。
在本教程中，我们将讨论从HTML页面调用JavaScript函数的两种主要方法。
在第一种方法中，我们将使用一个简单的输入标签和一个与其关联的提交按钮。单击按钮后，我们将看到一个在屏幕上弹出的对话框作为警报。此按钮单击时调用JavaScript函数以显示警报。
方法一
首先，使用input标签创建一个按钮。
单击按钮后，您将看到一个在屏幕上弹出的对话框，该对话框已在JavaScript函数中声明为警报。
clickEvent()函数允许在使用onclick()方法单击此按钮时执行alert()。
示例1
# index.html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<input type="button" onclick="clickEvent();" value="Click Here !" />
<script>
function clickEvent() {
alert("Hey... The Javascript function is invoked.");
}
</script>
</body>
</html>输出
上述程序将产生以下结果。当您单击“点击此处！”按钮时，它将弹出消息“嘿……已调用Javascript函数”的警报。
方法二
在这种方法中，我们可以使用JavaScript直接编写HTML。我们可以将所有模板代码添加到script标签中，并使用document.write()方法写入模板。同样，我们也可以直接从HTML模板中使用JavaScript函数，而无需使用任何事件。
示例2
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Calling JavaScript function in HTML</title>
</head>
<body>
<script>
function display() {
document.write("<h1 style='color:green;'>Welcome to Tutorials Point</h1>");
document.write("<h3>Writing this text from Javascript</h3>");
}
display();
</script>
</body>
</html>输出
上述程序的输出如下面的屏幕截图所示：
更新于：2022年4月22日
2K+浏览量
广告