Javascript: Uncaught TypeError: не функция

Question

Я строю сайт, который использует следующий код:

HTML:

<div onclick="linkPopup()"></div> 
<button type="button" id="hidePopup" onclick="hidePopup()">Cancel</button> 

Javascript:

function linkPopup(questionNumber) { 
     document.getElementById('linkPopup').style.display = 'block'; 
     document.getElementById('addLink').setAttribute('onclick', 'addLink(' + questionNumber + ')'); 
    } 

    function hidePopup() { 
     document.getElementById('linkPopup').style.display = 'none'; 
     document.getElementById('overlay').style.display = 'none'; 
    } 

Для по какой-то причине я получаю следующую ошибку в инструментах разработчика Chrome:

Uncaught TypeError: hidePopup is not a function

Каков путь этой проблемы и как я могу предотвратить это в будущем?

Answer 1

Проблема заключалась в том, что id='hidePopup' противоречил hidePopup(), поскольку они имеют одинаковое имя.

Решение заключалось в том, чтобы изменить идентификатор на нечто иное, чем «hidePopup».

Answer 2

id="hidePopup" onclick="hidePopup()" 

Идентификатор элемента совпадает с именем функции.

Чтобы избежать этого:

1. Избегайте глобалам. (Функции Wrap в выражениях с мгновенной выдержкой (IIFE) или в функциях, которые вы передаете обработчику событий, например load или DOM Ready).
2. Привяжите обработчики событий к элементам с использованием JavaScript (например, addEventListener() или jQuery's on()) вместо использования атрибутов встроенных событий.