点击事件监听器是否无法启动转换/转换？

Question

I'm creating a mobile menu 'burger' button in pure HTML and CSS3, with pure JS to deal with click events. 我正在使用纯HTML和CSS3创建移动菜单“汉堡”按钮，并使用纯JS处理点击事件。 Just one issue - when the button with the id 'button' is clicked, nothing happens. 只是一个问题-单击具有ID'button'的按钮时，什么也没有发生。 According to the built-in Firefox element inspector, the classes aren't being added, leading me to believe I messed up somewhere in the JS, but I could be wrong. 根据内置的Firefox元素检查器，没有添加类，这使我相信我在JS的某个地方搞砸了，但是我可能是错的。

Also, disregard the 'isX' variable - that will be used later to indicate the state of the button. 同样，忽略'isX'变量-稍后将使用该变量指示按钮的状态。

Thanks. 谢谢。

index.html 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 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);

EDIT #1: Accommodated Kai's response 编辑＃1：适应凯的回应

Answer 1

“ addEventListener”的“事件类型”参数应为字符串。

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

Answer 2

The DOM wasn't loaded yet - it couldn't have found the element. 尚未加载DOM-无法找到该元素。 I used window.onload to resolve this. 我用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;

点击事件监听器是否无法启动转换/转换？

问题描述

2 个解决方案

解决方案1
2 2014-11-17 01:27:18

解决方案2
0 已采纳 2014-11-17 06:55:06

点击事件监听器是否无法启动转换/转换？

问题描述

2 个解决方案

解决方案1 2 2014-11-17 01:27:18

解决方案2 0 已采纳 2014-11-17 06:55:06

解决方案1
2 2014-11-17 01:27:18

解决方案2
0 已采纳 2014-11-17 06:55:06