写一段HTML代码,点击按钮,内容出现在按钮里
时间: 2024-03-21 20:41:15 浏览: 24
好的,以下是满足您要求的 HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button content display</title>
</head>
<body>
<button id="myButton" onclick="displayContent()">Click me</button>
<script>
function displayContent() {
var button = document.getElementById("myButton");
button.innerHTML = "Hello, world!";
}
</script>
</body>
</html>
```
解释一下代码:
1. `button` 标签创建了一个按钮,`id` 属性为 `myButton`,并设置了一个 `onclick` 事件,当按钮被点击时,会调用 JavaScript 函数 `displayContent()`。
2. `script` 标签包含了 JavaScript 代码,其中函数 `displayContent()` 获取到了按钮对象,并将按钮的 `innerHTML` 属性设置为字符串 "Hello, world!"。
3. 当用户点击按钮时,`displayContent()` 函数会被调用,按钮的文本内容会被替换为 "Hello, world!"。
希望这段代码能够满足您的需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)