定义一个ID为ADD的类型为BUTTON的按钮变量,并添加点击事件,当点击后显示消息内容为“点击生效”的消息框
时间: 2024-03-17 16:41:57 浏览: 20
好的,以下是代码实现:
```
var addButton = document.createElement("BUTTON");
addButton.setAttribute("id", "ADD");
addButton.setAttribute("type", "BUTTON");
addButton.innerHTML = "ADD";
addButton.addEventListener("click", function() {
var messageBox = document.createElement("DIV");
messageBox.setAttribute("class", "message-box");
messageBox.innerHTML = "点击生效";
document.body.appendChild(messageBox);
});
```
这段代码创建了一个ID为ADD、类型为BUTTON的按钮,并添加了一个点击事件。当点击按钮后,会创建一个DIV元素作为消息框,并将内容设置为“点击生效”,最后将消息框添加到页面中显示。
相关问题
html中 点击按钮后 实现创建一个div 并为其赋予一个类
您可以使用JavaScript来实现在点击按钮后创建一个`div`元素,并为其添加一个类名。以下是一个示例代码:
```html
<button id="myButton">Create a div</button>
<script>
// 获取按钮元素
const myButton = document.querySelector('#myButton');
// 在按钮被点击时创建一个 div 元素
myButton.addEventListener('click', function() {
// 创建新的 div 元素
const newDiv = document.createElement('div');
// 给新元素添加类名
newDiv.classList.add('my-class');
// 将新元素添加到文档中
document.body.appendChild(newDiv);
});
</script>
```
在上面的示例中,我们首先通过`querySelector`方法获取`id`为`myButton`的按钮元素。然后,我们使用`addEventListener`方法来添加一个点击事件的监听器。当按钮被点击时,回调函数中的代码会创建一个新的`div`元素,并使用`classList`的`add`方法为其添加一个名为`my-class`的类名。最后,我们使用`appendChild`方法将新的`div`元素添加到文档中。这样,点击按钮后就可以在文档中创建一个新的带有`my-class`类名的`div`元素了。
编写js代码,使用按钮的点击事件为下拉菜单添加文本值1、2、3
当然,我可以为您提供代码示例。以下是由JavaScript编写的HTML代码,它使用按钮的点击事件为下拉菜单添加文本值:
```
<!DOCTYPE html>
<html>
<head>
<title>添加下拉菜单值</title>
</head>
<body>
<p>使用按钮的点击事件为下拉菜单添加文本值:</p>
<select id="mySelect">
<option value=""></option>
</select>
<br><br>
<button onclick="addOption()">添加选项</button>
<script>
function addOption() {
var select = document.getElementById("mySelect");
var option1 = document.createElement("option");
option1.text = "1";
select.add(option1);
var option2 = document.createElement("option");
option2.text = "2";
select.add(option2);
var option3 = document.createElement("option");
option3.text = "3";
select.add(option3);
}
</script>
</body>
</html>
```
您只需将上述代码复制并粘贴到任何文本编辑器中,然后将其保存为HTML文件,然后在浏览器中打开该HTML文件就可以看到下拉菜单。按下“添加选项”按钮即可在下拉菜单中添加文本值1、2、3。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)