如何将班级数据传入按钮并实现隐藏按钮的显示

你的代码存在几个关键问题： #

• 错误获取了输入框的值而非元素本身，导致无法添加输入监听
• 监听了输入框的点击事件，应该监听输入内容变化的事件
• 跳转按钮没有文本，且未处理携带数据跳转的逻辑
• 表单内按钮默认是提交类型，会触发页面刷新

修正后的完整代码： #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>班级管理</title>
  <link rel="stylesheet" href="information.css">
</head>
<body>
  <div class="tab">
    <button class="tablinks" id="btn">Add here</button>
  </div>
  <form id="Add" class="information">
    <p>Class:</p>
    <input type="text" placeholder="enter your class here" id="name">
    <!-- 阻止表单默认提交行为 -->
    <button type="button">Add</button>
    <!-- 添加按钮文本 -->
    <button id="infor" type="button">查看班级详情</button>
  </form>
</body>
</html>

CSS部分

form {
  visibility: hidden;
  background-color: beige;
  width: 60%;
  height: 150px;
  margin-left: 20%;
  border-radius: 10px;
  text-align: center;
  display: inline-block;
}

.tablinks {
  width: 20%;
  height: 50px;
  margin-top: 10%;
  margin-left: 40%;
}

.btnn {
  background-color: white;
}

.information {
  margin-top: 5%;
}

#infor {
  visibility: hidden;
  margin-left: 10px;
}

JavaScript部分

const btn = document.getElementById("btn");
const classNameInput = document.getElementById("name"); // 获取输入框元素
const inforBtn = document.getElementById("infor");

// 切换表单显示/隐藏
btn.addEventListener('click', () => {
  const form = document.getElementById("Add");
  form.style.visibility = form.style.visibility === 'hidden' ? 'visible' : 'hidden';
});

// 监听输入框内容变化，控制跳转按钮显示
classNameInput.addEventListener('input', () => {
  // 当输入框有内容时显示按钮，否则隐藏
  inforBtn.style.visibility = classNameInput.value.trim() ? 'visible' : 'hidden';
});

// 跳转按钮点击事件，携带班级数据跳转
inforBtn.addEventListener('click', () => {
  const className = classNameInput.value.trim();
  if (className) {
    // 这里替换成你要跳转的目标页面URL，把班级名称作为参数传递
    window.location.href = `target-page.html?class=${encodeURIComponent(className)}`;
  }
});

关键修改说明： #

1. 修正输入框元素获取：把document.getElementById("name").value改成获取元素本身，才能添加事件监听。
2. 监听输入事件：用input事件替代click，实时响应输入框内容变化，只要有内容就显示跳转按钮。
3. 处理表单按钮默认行为：给按钮添加type="button"，避免点击触发表单提交导致页面刷新。
4. 添加跳转逻辑：点击跳转按钮时，把班级名称通过URL参数传递到目标页面，使用encodeURIComponent处理特殊字符。
5. 给跳转按钮添加文本：让按钮可见性变化时用户能明确识别。

内容的提问来源于stack exchange，提问作者You dunno