css 如何将类数据发送到按钮

gmxoilav 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(172)

我做了一个按钮来显示一个表单，以便在输入中输入类名。
之后，1按钮将存在（它是隐藏后，我点击一个按钮，它会出现），然后按下隐藏按钮后，它会转到另一个页面，但问题是我不知道如何使隐藏按钮（与数据在它）可见。
下面是我的代码：

const btn = document.getElementById("btn");
const btnn = document.getElementById("name").value;

btn.addEventListener('click', () => {
  const form = document.getElementById("Add");

  if (form.style.visibility === 'hidden') {
    form.style.visibility = 'visible';
  } else {
    form.style.visibility = 'hidden';
  }
});

btnn.addEventListener('click', () => {
  const but = document.getElementById("infor");

  if (but.style.visibility === 'hidden') {
    but.style.visibility = 'visible';
  } else {
    but.style.visibility = 'hidden';
  }

})

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;
}

<!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>Document</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>Add</button>
    <button id="infor"></button>
  </form>
</body>

</html>