點擊事件偵聽器不啓動轉換/轉換？

-1

我在純HTML和CSS3中創建了一個移動菜單「漢堡」按鈕，用純JS處理點擊事件。只有一個問題 - 點擊帶有「按鈕」ID的按鈕時，沒有任何反應。根據內置的Firefox元素檢查器，這些類沒有被添加，導致我相信我在JS的某個地方搞砸了，但我可能是錯的。點擊事件偵聽器不啓動轉換/轉換？

此外，忽略'isX'變量 - 稍後將用於指示按鈕的狀態。

謝謝。

的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="menu.js"></script> 
<title>Icon Test</title> 
<style> 
* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.container { 
    display: block; 
    width: 48px; 
    height: 48px; 
    background: #999; 
} 

.line-top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    fill: #FFF; 
    transition: all 2s ease 3s; 

} 

.line-top-active { 
    transform: translateX(0px) rotate(45deg); 
    transform-origin: center; 
    -moz-transform-origin: center; 
} 

.line-bottom { 
    position: absolute; 
    top: 0; 
    left: 0; 
    fill: #FFF; 
    transition: all 2s ease 3s; 
} 

.line-bottom-active { 
    transform: translateX(0px) rotate(-45deg); 
    transform-origin: center; 
    -moz-transform-origin: center; 
} 

.rect-top { 
    transition: all 2s ease-in-out 0s; 
} 

.rect-top-active { 
    transform: translateY(8); 
    transform-origin: center; 
    -moz-transform-origin: center; 
} 

.rect-bottom { 
    transition: all 2s ease-in-out 0s; 
} 

.rect-bottom-active { 
    transform: translateY(-8); 
    transform-origin: center; 
    -moz-transform-origin: center; 
} 
</style> 
</head> 

<body> 
<button class="container" id="button"> 
    <svg id="svg-top" class="line-top" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96"> 
     <rect id="rect-top" class="rect-top" width="32" height="4" x="32" y="38"></rect> 
    </svg> 
    <svg id="svg-bottom" class="line-bottom" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96"> 
     <rect id="rect-bottom" class="rect-bottom" width="32" height="4" x="32" y="54"></rect> 
    </svg> 
</button> 
</body> 
</html>

menu.js

var isX = false; 
var button = document.getElementById('button'); 

button.addEventListener('click', function(e) { 
    var topSvg = document.getElementById('svg-top'); 
    var bottomSvg = document.getElementById('svg-bottom'); 
    var topLine = document.getElementById('rect-top'); 
    var bottomLine = document.getElementById('rect-bottom'); 

    if(isX) { 

    } else { 
     topLine.classList.add('rect-top-active'); 
     bottomLine.classList.add('rect-bottom-active'); 
     topSvg.classList.add('line-top-active'); 
     bottomSvg.classList.add('line-bottom-active'); 
    } 

}, false);

編輯＃1：容納凱的反應

來源

2014-11-17 Jeffrey

DOM尚未加載 - 它無法找到元素。我用window.onload來解決這個問題。

function init() { 
    alert("Loaded"); 
    document.getElementById('button').onclick = function() { 
     alert("Success"); 
     var topSvg = document.getElementById('svg-top'); 
     var bottomSvg = document.getElementById('svg-bottom'); 
     var topLine = document.getElementById('rect-top'); 
     var bottomLine = document.getElementById('rect-bottom'); 

     topLine.setAttribute('class', 'rect-top-active'); 
     bottomLine.setAttribute('class', 'rect-bottom-active'); 
     topSvg.setAttribute('class', 'line-top-active'); 
     bottomSvg.setAttribute('class', 'line-bottom-active'); 
    } 
}; 

window.onload = init;

來源

2014-11-17 06:55:06 Jeffrey

的 '事件類型' 參數的「的addEventListener」應該是一個字符串。

button.addEventListener('click', function(e) {

來源

2014-11-17 01:27:18 Kai

哦，男孩，那是一個愚蠢的錯誤。謝謝。不幸的是，它並沒有解決問題。 – Jeffrey

點擊事件偵聽器不啓動轉換/轉換？

回答

相關問題