Функция прослушивания событий не инициирует переход/преобразование?

-1

Я создаю кнопку «burger» для мобильного меню в чистом HTML и CSS3, с чистым JS для обработки кликов. Только одна проблема - когда нажата кнопка с кнопкой «кнопка», ничего не происходит. Согласно встроенному инспектору элементов 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);

EDIT # 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

Функция прослушивания событий не инициирует переход/преобразование?

ответ

Смежные вопросы