如何编写按钮以在 JavaScript 中工作 - HTML

在 HTML 中，可以通过创建按钮来触发 JavaScript 事件。下面是一个简单的按钮实例：

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

<script>
function myFunction() {
  alert("Hello World!");
}
</script>

在这个例子中，当用户单击按钮时，myFunction 函数将被调用，并显示一个警告框，其中包含消息 "Hello World!"。

但是，这只是一个简单的例子。让我们更详细地了解如何编写更复杂的按钮以在 JavaScript 中工作。

HTML 按钮标签

在 HTML 中，有三种常用的按钮标记：

• <button>: 最常用的按钮标签之一，用于创建可点击的按钮。可以包含文本、图像和子元素。
• <input type="button">: 用于创建一个纯文本按钮。
• <input type="submit">: 用于创建一个表单提交按钮。

在这个教程中，我们主要关注 <button> 标记。

如何在 HTML 中创建按钮

要在 HTML 中创建按钮，请将 <button> 标记插入到您想要放置按钮的位置。这是一个基本的 HTML 按钮：

<button>点击我</button>

如果要将文本添加到按钮上，请在按钮标记中添加文本：

<button>点击我</button>

按钮可以包含图像：

<button><img src="button.png" alt="按钮"></button>

按钮可以包含子元素：

<button>
  <i class="fas fa-arrow-left"></i>
  返回
</button>

如何添加 JavaScript 事件到按钮

要在 JavaScript 中处理按钮，需要将事件附加到按钮上。最常用的事件是 onclick 事件。

例如，下面的按钮将在单击时触发 myFunction 函数：

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

<script>
function myFunction() {
  alert("Hello World!");
}
</script>

请注意，JavaScript 代码必须放置在 HTML 页面的 <script> 标签中。

如何使用 JavaScript 改变按钮

要使用 JavaScript 改变按钮，可以使用 Element 对象的属性和方法。例如，要更改按钮的文本，请使用 innerHTML 属性：

<button id="myButton" onclick="changeText()">点击我</button>

<script>
function changeText() {
  var button = document.getElementById("myButton");
  button.innerHTML = "已单击";
}
</script>

在这个例子中，当单击按钮时，changeText 函数将被调用，将按钮的文本更改为 "已单击"。

总结

在本教程中，我们学习了如何在 JavaScript 中处理 HTML 按钮。我们了解了 HTML 按钮标记以及如何添加事件和更改按钮的属性。希望这篇教程对您有所帮助。