用HTML写一个按钮点击后更换按钮文字的代码
时间: 2024-05-14 17:13:26 浏览: 12
好的,以下是可以回答的代码:
```
<button onclick="changeText()">点击我</button>
<script>
function changeText() {
document.querySelector("button").innerHTML = "已点击";
}
</script>
```
当然,如果你需要更多的样式和交互效果,可以使用CSS和JavaScript来实现。
相关问题
用html和JS写一个点击按钮可以更换背景颜色的代码
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
<style>
body{
background-color: #f0f0f0;
}
</style>
</head>
<body>
<button onclick="changeColor()">Change Color</button>
<script src="script.js"></script>
</body>
</html>
```
JS:
```
function changeColor(){
let colors = ["#ff6347", "#00ff7f", "#87ceeb", "#ffd700", "#9400d3", "#ff8c00"];
let randomColor = colors[Math.floor(Math.random()*colors.length)];
document.body.style.backgroundColor = randomColor;
}
```
在这个例子中,我们定义了一个按钮,当它被点击时,调用 `changeColor` 函数。这个函数将从预定义的颜色数组中选择一个颜色,并将其设置为页面背景颜色。
你能否用html语言写一个点击按钮弹出弹窗的代码
当然可以,以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击按钮弹出弹窗</title>
</head>
<body>
<button onclick="alert('Hello World!')">点击我</button>
</body>
</html>
```
当用户点击按钮时,会弹出一个包含 "Hello World!" 文本的弹窗。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![application/x-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)