Question

因此，当用户使用javascript单击“注册”按钮时，我试图更改类“感觉”和“感觉”的可见性，但是我什么也没得到。当我单击按钮时什么也没有发生。我首先设置了隐藏的类“感觉”的可见性。用户单击按钮后，它应更改为可见，类别“感觉”的可见性应更改为隐藏。

document.getElementById("btn").addEventListener("click", function(e) {
  signup()
});

function signup() {
  document.getElementsByClassName("feel").style.visibility: "hidden";
  document.getElementsByClassName("feels").style.visibility: "visible";
}

<div class="feel">
  <h2>Be a part of this society to feel.</h2>
  <p><a href="">Forgot your password?</a> Doesn't have an account?
    <button id="btn" onclick="return(signup());" id="sign">Signup</button>
    <form action name="myForm" onsubmit="return(validate());">
      <input type="email" required placeholder="Email Address" name="email">
      <input type="password" placeholder="Password" name="pass">
      <input type="submit" name="submit" Value="Sign In">
    </form>
</div>
<div class="feels">
  <h1>Please provide the following informations:</h1>
  <form action name="form" onsubmit="return(validate1());">
    <input type="text" placeholder="Firstname" name="fname">
    <input type="text" placeholder="Lastname" name="lname">
    <input type="email" placeholder="Email Address" name="email">
    <input type="password" placeholder="Password" name="pass">
    <input type="password" placeholder="Re-type Password" name="repass">
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="submit" name="submit1" Value="Submit">
  </form>
</div>

Answer 1

您正在使用:，它在对象初始化程序中使用，但要进行分配，则应使用=。

getElementsByClassName返回HTMLCollection。它没有属性style。您可以使用forEach()和querySelectorAll()。

function signup()
{
   document.querySelectorAll(".feel").forEach(x => x.style.visibility = "hidden");
   document.querySelectorAll(".feels").forEach(x => x.style.visibility = "visible");
}

工作摘要

document.getElementById("btn").addEventListener("click", function(e) {
  signup()
});

function signup()
{
       document.querySelectorAll(".feel").forEach(x => x.style.visibility = "hidden");
       document.querySelectorAll(".feels").forEach(x => x.style.visibility = "visible");
}

<div class="feel">
  <h2>Be a part of this society to feel.</h2>
  <p><a href="">Forgot your password?</a> Doesn't have an account?
    <button id="btn" onclick="return(signup());" id="sign">Signup</button>
    <form action name="myForm" onsubmit="return(validate());">
      <input type="email" required placeholder="Email Address" name="email">
      <input type="password" placeholder="Password" name="pass">
      <input type="submit" name="submit" Value="Sign In">
    </form>
</div>
<div class="feels">
  <h1>Please provide the following informations:</h1>
  <form action name="form" onsubmit="return(validate1());">
    <input type="text" placeholder="Firstname" name="fname">
    <input type="text" placeholder="Lastname" name="lname">
    <input type="email" placeholder="Email Address" name="email">
    <input type="password" placeholder="Password" name="pass">
    <input type="password" placeholder="Re-type Password" name="repass">
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="submit" name="submit1" Value="Submit">
  </form>
</div>

Answer 2

您的签名按钮具有2个id属性：id =“ sign”和id =“ btn”。

然后：您没有名为“ return”的功能，请将“ return signup（）”放入按钮的onclick属性中。

Answer 3

如评论中所述，方法getElementsByClassName返回页面中找到的该类的所有出现的HTML集合，而不是单个HTML元素（请注意，getElementsByClassName中的's'使它复数）。因此，编译器找不到任何属性样式或可见性，并且一定在控制台上引发了错误，请务必在事情不起作用时始终在控制台上监视错误。

如果您确定该类中只有一个元素，则应该使用id代替，然后使用getElementById方法返回单个对象。

如果您确定该类会存在多个元素，请确保您知道该类的出现位置，以便可以通过getElementsByClassName返回的HTML集合上的索引来访问它

`document.getElementsByClassName("myClass")[0].style.visibility="hidden"`

P.S您可以直接将注册功能附加为事件处理程序 document.getElementById("btn").addEventListener("click", signup);

Answer 4

尝试一下。这是Sample Fiddle

document.getElementById("btn").addEventListener("click", signup);

function signup() {
  var a = document.querySelectorAll(".feel")[0];
  var b = document.querySelectorAll(".feels")[0];
  a.style.visibility = "hidden"
  b.style.visibility = "visible";
}

按钮onclick使用javascript更改类的可见性

4 个答案:

工作摘要