📅  最后修改于: 2023-12-03 15:24:18.226000             🧑  作者: Mango
当我们需要在按钮被点击时更改按钮上的文本,可以通过 onclick 事件来实现。下面介绍两种常用的方法。
通过 JavaScript 可以直接操作 DOM 来更改按钮上的文本。具体实现如下:
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
var btn = document.querySelector("button");
btn.innerHTML = "Clicked";
}
</script>
以上代码将按钮上的文本从 "Click Me" 更改为 "Clicked"。
使用 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>
<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 库需要先引入。