📜  如何在 onclick 上更改按钮中的文本 (1)

📅  最后修改于: 2023-12-03 15:24:18.226000             🧑  作者: Mango

如何在 onclick 上更改按钮中的文本

当我们需要在按钮被点击时更改按钮上的文本,可以通过 onclick 事件来实现。下面介绍两种常用的方法。

1. 使用 JavaScript

通过 JavaScript 可以直接操作 DOM 来更改按钮上的文本。具体实现如下:

<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
  var btn = document.querySelector("button");
  btn.innerHTML = "Clicked";
}
</script>

以上代码将按钮上的文本从 "Click Me" 更改为 "Clicked"。

2. 使用 jQuery

使用 jQuery 可以更加简洁地实现更改按钮上的文本。具体实现如下:

<button id="myBtn">Click Me</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#myBtn").click(function() {
  $(this).text("Clicked");
});
</script>

以上代码将按钮上的文本从 "Click Me" 更改为 "Clicked"。注意 jQuery 库需要先引入。

总结

以上介绍了两种常用的方法来在 onclick 上更改按钮中的文本:使用 JavaScript 和使用 jQuery。具体选择哪种方法视具体情况而定。

返回的代码片段:

当我们需要在按钮被点击时更改按钮上的文本,可以通过 onclick 事件来实现。下面介绍两种常用的方法。

## 1. 使用 JavaScript

```html
<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
  var btn = document.querySelector("button");
  btn.innerHTML = "Clicked";
}
</script>
2. 使用 jQuery
<button id="myBtn">Click Me</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#myBtn").click(function() {
  $(this).text("Clicked");
});
</script>

以上代码将按钮上的文本从 "Click Me" 更改为 "Clicked"。注意 jQuery 库需要先引入。