使用Js完成一个简单事件响应。向姓名文本框中输入你的姓名,点击“欢迎语”按钮,在文本区中显示如图所示内容,其中的姓名和日期是通过获取得 来,然后点击“获取日 期”按钮,能够获取到文本区中“今天是〞后面的日期内容,将此内容弹出对话框形式显示
时间: 2023-11-22 22:54:11 浏览: 32
HTML代码:
```
<label for="name">姓名:</label>
<input type="text" id="name"><br><br>
<button id="welcome-btn">欢迎语</button>
<button id="date-btn">获取日期</button>
<br><br>
<textarea id="output" rows="4"></textarea>
```
JavaScript代码:
```
const nameInput = document.getElementById('name');
const welcomeBtn = document.getElementById('welcome-btn');
const dateBtn = document.getElementById('date-btn');
const outputTextarea = document.getElementById('output');
welcomeBtn.addEventListener('click', () => {
const name = nameInput.value;
const date = new Date().toLocaleDateString();
outputTextarea.value = `你好,${name}。今天是${date}。`;
});
dateBtn.addEventListener('click', () => {
const outputText = outputTextarea.value;
const date = outputText.substring(outputText.indexOf('是') + 1);
alert(date);
});
```
代码说明:
1. 首先通过`document.getElementById`获取需要操作的DOM元素。
2. 对于“欢迎语”按钮,我们使用`addEventListener`方法添加一个点击事件监听器。在监听器内部,我们获取文本框中的姓名和当前日期,并将它们拼接成需要显示的字符串,最后将这个字符串赋值给输出文本框。
3. 对于“获取日期”按钮,同样使用`addEventListener`方法添加一个点击事件监听器。在监听器内部,我们获取输出文本框中“今天是”后面的日期内容,然后通过`alert`方法将它以对话框形式显示出来。