如何在 HTML 页面中包含内联 JavaScript？

在本教程中，我们将学习如何在 HTML 页面中包含内联 JavaScript。

使用 onclick 事件包含内联 JavaScript

就像从 HTML 页面中的内联 JavaScript 中弹出一个警报消息一样，我们也可以声明一个函数并调用它。此方法使我们能够在 JavaScript 函数内部编写多行代码，以执行比仅显示警报消息更多的任务。在本例中，我们将通过从内联 JavaScript 代码调用函数来更改元素的文本和背景颜色。

用户可以按照以下语法在 HTML 页面中包含内联 JavaScript 以调用函数。

语法

// inline JavaScript within the onclick attribute of a button
<button type = "button" onclick = "(function(){

   // JavaScript Code
})()"> Click Me </button>

在上述语法中，我们声明了一个匿名函数，为了能够调用此匿名函数，我们将其括在括号之间，然后通过打开和关闭括号来调用它。

示例

在下面的示例中，我们在 HTML 页面中包含了内联 JavaScript 以调用函数。我们使用了函数来更改“root”元素的文本。我们在“更改文本”按钮的点击事件上设置了此函数，因此当用户使用该按钮时，“root”元素的文本将更改。类似地，我们设置了另外两个带有点击事件的按钮。“更改背景”按钮用于更改背景颜色，“重置更改”按钮用于将“root”元素的所有更改重置。

Open Compiler
<html>
<body>
   <p>Including inline JavaScript inside an HTML page to invoke a function</p>
   <div>
   <button type = "button" onclick ="(function(){
      // JavaScript Code to Change the Inner Text
      const root = document.getElementById('root')
      root.innerHTML = 'This Text is Changed By Inline JavaScript!'
   })()"> Change Text </button>
   <button type = "button" onclick = "(function(){
      // JavaScript Code to Change the Background Color
      const root = document.getElementById('root')
      root.style.backgroundColor = '#85f8d5'
   })()"> Change Background </button>
   <button type = "button" onclick = "(function(){
      // JavaScript Code to Rest the Changes
      const root = document.getElementById('root')
      root.innerHTML = 'Welcome to Tutorialspoint!'
      root.style.backgroundColor = '#ffffff'
   })()"> Reset Changes </button>
   </div>
   <div id="root" style="border: 1px solid black; margin-top: 10px; padding: 10px;">Welcome to Tutorialspoint!</div>
</body>
</html>

使用内联 JavaScript 显示警报消息

了解 JavaScript 工作原理的最简单方法之一是使用 alert 方法。alert 方法打开一个包含消息的弹出窗口。在本例中，我们将在内联 JavaScript 代码中使用该 alert 方法。内联 JavaScript 代码始终需要写入事件属性之间，因此每当触发该事件时，内联 JavaScript 代码将执行。

用户可以按照以下语法在 HTML 页面中包含内联 JavaScript 以显示警报消息。

语法

// inline JavaScript within the onclick attribute of a button
<button type="button" onclick="alert('Welcome')"> Click Me </button>

在上述语法中，“welcome”是警报消息。每当用户点击按钮时，都会显示警报消息。

示例

在下面的示例中，我们在 HTML 页面中包含了内联 JavaScript 以显示警报消息。我们使用了多个元素来获取显示不同警报消息的点击事件。

Open Compiler
<html>
<body>
   <p>Including inline JavaScript inside an HTML page to show <i>alert</i> messages</p>
   <button type = "button" onclick = "alert('Welcome to Tutorialspoint')"> Click Me </button>
   <p style="border: 1px solid black; padding: 10px;" onclick="alert('Hi from p tag!')">'p' tag</p>
   <div style="border: 1px solid black;padding: 10px;" onclick="alert('Hi from div tag!')">'div' tag</div>
</body>
</html>

在本教程中，我们学习了如何在 HTML 页面中包含内联 JavaScript。我们已经了解了如何使用内联 JavaScript 显示警报消息，并且我们还在示例中对其进行了编码，并为多个元素的点击事件使用了多个警报消息。我们还了解了如何在内联 JavaScript 中执行或调用函数。

在此方法的示例中，我们通过使用多个按钮的点击事件来更改内部文本和背景颜色并重置它们。因此，内联 JavaScript 对于快速编写 JavaScript 代码可能很有用，但对于大型应用程序而言，它不是包含 JavaScript 代码的最佳方法，因为它可能包含多个重复代码，并且管理应用程序可能很困难。

更新于: 2022年9月14日

8K+ 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告