Слушатель событий Не функционирует должным образом

Question

У меня есть несколько ссылок, которые являются ссылками через JavaScript. Первая работала, и я просто скопировал код и изменил имена, но второй не работает. Я посмотрел на него, и он точно такой же, как и предыдущий, который работает, поэтому я не знаю, что происходит.

HTML:

<a id="Home">Home</a> &nbsp&nbsp||&nbsp&nbsp 

    <a href="account.php">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp 

    <a id="Logout">Logout</a> 

</div> 

JavaScript:

<script> 
    var Home_Link = document.getElementById("Home"); 
    Home_Link.addEventListener('click', Home, true); 

    function Home() { 
     window.location.href = "index.php"; 
    } 

    var Login_Link = document.getElementById("Login"); 
    Login_Link.addEventListener('click', Login, true); 

    function Login() { 
    window.location.href = "-login.php"; 
    } 

    var Logout_Link = document.getElementById("Logout"); 
    Logout_Link.addEventListener('click', Logout, true); 

    function Logout() { 
     window.location.href = "logout-redirect.php"; 
    } 


</script> 

Я редактировал его, чтобы включить причину проблемы (я не думаю, что это была проблема), и я нашел проблему. Может ли кто-нибудь сказать мне, почему это проблема?

Проблема заключается в том, что ввод кода:

var Login_Link = document.getElementById("Login"); 
Login_Link.addEventListener('click', Login, true); 

function Login() { 
    window.location.href = "-login.php"; 
} 

До последнего бита кода предотвращает последний бит кода от бега. Я предполагаю, что это потому, что в этой версии страницы нет идентификатора «Login». Почему он это делает и каков способ предотвратить это?

Answer 1

"Оказывается, скрипт вешен нг на document.getElementById(), где ID не существует ... Если кто-то может объяснить, почему именно он висит на ненайденный ID, который был бы поучительным»

getElementById() функция возвращает null если элемент не найден с указанный id. Это само по себе не является ошибкой и не вызывает сбой сценария. Следующая строка:

var Login_Link = document.getElementById("Login"); 

... «работает» в том смысле, что он не врезаться, но если нет элемента с таким идентификатором, то Login_Link устанавливается в null, так тогда, когда вы пытаетесь сделать это:

Login_Link.addEventListener('click', Login, true); 

... это, как говорят:

И что дает TypeError: Cannot call method 'addEventListener' of null. Обратите внимание, что это (или подобное) сообщение об ошибке будет отображаться в консоли вашего браузера, что вы можете увидеть, нажав F12 в Chrome и IE или ctrl-shift-k в FF.

Если ваша страница настроена таким образом, что элемент не может быть там, то вам просто необходимо протестировать null:

var Login_Link = document.getElementById("Login"); 
if (Login_Link != null) { 
    Login_Link.addEventListener('click', Login, true); 
} 

Обратите внимание, что для кода вы показали не должно быть никаких нужно использовать JavaScript вообще - если единственное, что делают ваши обработчики событий кликов, - это установить window.location.href на какой-то адрес, тогда вы можете просто потерять JS и установить href="index.php" (или любой другой адрес) в элементах привязки.

Даже если вы собираетесь сделать что-то более сложное в обработчике щелчка JavaScript, я бы до сих пор предполагают, по крайней мере, установив href="#" (или href="javascript:void(0)", если вы чувствуете, что вы должны), потому что анкерные элементы, которые имеют атрибут href могут использоваться из клавиатура - то есть пользователи, которые не могут или не могут использовать мышь или другое указывающее устройство, могут вставить вкладку в якорь и «щелкнуть» его, нажав клавишу ввода.

Answer 2

ваша вторая ссылка не имеет атрибута ID:

<a href="account.php">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp 

и сценарий ожидает атрибут ID:

var Login_Link = document.getElementById("Login"); 
Login_Link.addEventListener('click', Login, true); 

function Login() { 
    window.location.href = "-login.php"; 
} 

так, изменить ссылку, и объявления атрибут ID:

<a href="account.php" id="login">Hamburger7</a> &nbsp&nbsp||&nbsp&nbsp