Question

如果这是一个简单的问题，我很抱歉，但我很难用一些javascript。

function login() {
    var lgin = document.getElementById("logIn");
    lgin.style.display = "block";
    lgin.style.position = "fixed";
    lgin.style.width = "100%";
    lgin.style.height = "100%";
    lgin.style.paddingTop = "15px";
}

var lgButton = document.getElementById("openRooms");
lgButton.addEventListener("click", login, false);

<p><a href="#" id="openRooms">Log In</a></p>

<section id="logIn">
  <div class="form-style-6">
    <h3>Log In</h3>
    <form>
      <input type="text" name="field1" placeholder="Name" />
      <input type="email" name="field2" placeholder="Email Address" />
      <input type="password" name="field3" placeholder="Password" />
      <input type="submit" value="Submit" />
    </form>
   	  </div>
</section>

我的问题是我写的javascript不起作用。

我想知道你们其中一个人是否可以帮助我。

Answer 1

在窗口加载事件回调

中添加您的事件侦听器

window.addEventListener("load",function(){
  var lgButton = document.getElementById("openRooms");
  lgButton.addEventListener("click", login, false);    
},false);

Answer 2

CSS：

#logIn.selected {
  display:block;
  position:fixed;
  width: 100%;
  height: 100%;
  paddingTop: 15%;
}

JS：

  document.addEventListener("DOMContentLoaded", function(event) { 
     function login() {
       document.getElementById("logIn").setAttribute("class", "selected");
     }

     var lgButton = document.getElementById("openRooms");
     lgButton.addEventListener("click", login, false);
  });

由DOM事件监听器混淆

2 个答案: