js定义一个学员数组,并使用箭头函数实现两个功能,当点击新增学员按钮时,弹出对话框,当点击显示学员信息按钮时,输入的学员信息使用模板字符串显示在页面上
时间: 2024-11-03 21:18:40 浏览: 17
jQuery实现单击按钮遮罩弹出对话框效果(1)
在JavaScript中,首先你需要创建一个学员数组,然后可以定义两个事件监听器,分别对应“新增学员”和“显示学员信息”这两个功能。这里是一个使用箭头函数的例子:
```javascript
// 定义一个学员数组
let students = [];
// 创建两个按钮元素
const addStudentButton = document.getElementById('add-student');
const displayStudentsButton = document.getElementById('display-students');
// 新增学员功能 - 点击弹出对话框
addStudentButton.addEventListener('click', () => {
const newStudentInput = prompt("请输入新学员信息");
if (newStudentInput) { // 如果有输入
students.push(newStudentInput);
}
});
// 显示学员信息功能 - 点击显示信息
displayStudentsButton.addEventListener('click', () => {
const inputBox = document.getElementById('input-box'); // 假设有一个输入框获取用户输入
const enteredStudent = inputBox.value; // 获取输入的学员信息
// 渲染模板字符串显示学员信息
const studentDisplay = `
<p>学员信息:${enteredStudent}</p>
`;
document.getElementById('student-display').innerHTML = studentDisplay; // 将信息添加到指定位置
});
```
这个例子假设你已经有了一个输入框(`<input type="text" id="input-box">`)供用户输入信息,以及对应的显示区域(`<div id="student-display"></div>`)。当你点击“新增学员”按钮,会提示用户输入,输入后添加到学员数组;点击“显示学员信息”按钮,会从输入框读取信息并在页面上显示。
阅读全文