DOM事件監聽器感到困惑

對不起，如果這是一個簡單的問題，但我對某些javascript有困難。DOM事件監聽器感到困惑

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> 
 
    \t </div> 
 
</section>

我在這裏的問題是，我寫出來的JavaScript不起作用。

我想知道你們中的一個人能否幫助我。

來源

2016-01-03 HTMLNoob

看起來OK，你打開控制檯（F12）和檢查對於錯誤，您可能在DOM中的元素之前添加了腳本，嘗試將腳本標記向下移至** **之前**'。 – adeneo

另外#logIn也有CSS屬性（display：none;） – HTMLNoob

將'.padding-top'更改爲'.paddingTop'。 –

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

來源

2016-01-03 18:22:12

你也可以使用'.className'屬性，就像這個'element.className ='someClass''一樣，這是可以的，但是一旦一個元素應用了一些類並且你需要檢查或者改變他們。然而，甚至比'className'好，你得到一個'classList'成員，它可以檢查，切換，添加和從元素列表中刪除類。這樣做：elem.classList.contains（className）;和elem.classList.toggle（className）;和elem.classList.add（className）;最後，elem.classList.remove（className ）;' - 享受！ :) – enhzflep

是的。這也是很好的方式！ –

添加事件偵聽器窗口中加載事件回調內部

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

來源

2016-01-03 18:13:08

謝謝！它是固定的。 – HTMLNoob

DOM事件監聽器感到困惑

回答

相關問題