已知页面元素如下图所示,请利用所学知识,实现如 下功能: 1.单击“问候老师”,弹出一个弹窗,内容为:“XX 老师,您好!;(XX为js I 老师名字) 2.双击“问候学生”,弹出一个弹窗,内容为“YY 同学,您好!”;(YY 为你的 名字)。
时间: 2024-03-13 18:44:05 浏览: 43
假设HTML中有以下两个元素:
```html
<button id="greet-teacher">问候老师</button>
<button id="greet-student">问候学生</button>
```
我们可以使用JavaScript来实现上述功能:
```html
<button id="greet-teacher">问候老师</button>
<button id="greet-student">问候学生</button>
<script>
const teacherButton = document.getElementById("greet-teacher");
const studentButton = document.getElementById("greet-student");
teacherButton.addEventListener("click", function() {
const teacherName = "js I 老师";
alert(`${teacherName},您好!`);
});
studentButton.addEventListener("dblclick", function() {
const studentName = "YY";
alert(`${studentName} 同学,您好!`);
});
</script>
```
在上述代码中,我们通过 `document.getElementById()` 方法获取了两个按钮元素,分别为 `teacherButton` 和 `studentButton`。然后,我们使用 `addEventListener()` 方法为这两个按钮添加点击和双击事件的监听器。在事件处理函数中,我们分别使用 `alert()` 方法弹出问候语,其中老师名字和学生名字是通过变量传递的。
阅读全文