Запуск функции из «AddEventListener»?

Question

У меня есть функция, которую нужно вызывать, когда событие запускается, но по какой-то причине я получаю синтаксические ошибки. Он работал нормально, когда я помещал функцию внутри прослушивателя событий, но теперь мне нужно иметь возможность вызвать ее вместо этого.

rbProject.addEventListener('change', rbProjectClicked()) { // LINE WITH ERROR 

}) 

function rbProjectClicked(){ 

    txtReference.placeholder = "Insert project reference"; 
    txtTitle.placeholder = "Insert project title"; 
    txtReference.value = "" 
    txtTitle.value = ""; 
    txtReference.disabled = false; 
    txtTitle.disabled = false; 
    document.getElementById('divProjectManager').style.display = ''; 
    document.getElementById('divAccountManager').style.display = 'none'; 

    document.getElementById('divAccountFeedback').style.display = 'none'; 
    document.getElementById('divClientFeedbackOver').style.display = ''; 
    document.getElementById('divClientFeedbackUnder').style.display = ''; 
} 

Answer 1

Вы связывание результата rbProjectClicked() к change событию, а не ссылки на функцию.

ли это вместо:

rbProject.addEventListener('change', rbProjectClicked); 

Заметьте, я снял заднюю ()rbProjectClicked с. () вызывает вызов функции, но вы хотите привязать ссылку только к функции. rbProjectClicked - это ссылка на функцию.

Answer 2

Проблемы здесь:

rbProject.addEventListener('change', rbProjectClicked()) { // LINE WITH ERROR 

}) 

В JavaScript есть два способа объявить функцию, вы можете объявить анонимную функцию как это:

function (params ...) {...} 

Или именованную функцию:

function name(params ...) { ... } 

Именованная декларация «сначала интерпретируется», поэтому порядок, в котором вы их заявляете, не соответствует тер. Если вы написали

rbProject.addEventListener('change', rbProjectClicked); 
var rbProjectClicked = function() { ... } 

Это не сработает. Следующий фрагмент будет работать. Это, как правило, хорошая идея, чтобы объявить вещи, прежде чем вы на самом деле их использовать, но это дело вкуса я думаю:

rbProject.addEventListener('change', rbProjectClicked); 
function rbProjectClicked() { ... } 

То, что вы действительно хотите это:

function rbProjectClicked(){ 
    txtReference.placeholder = "Insert project reference"; 
    txtTitle.placeholder = "Insert project title"; 
    txtReference.value = "" 
    txtTitle.value = ""; 
    txtReference.disabled = false; 
    txtTitle.disabled = false; 
    document.getElementById('divProjectManager').style.display = ''; 
    document.getElementById('divAccountManager').style.display = 'none'; 

    document.getElementById('divAccountFeedback').style.display = 'none'; 
    document.getElementById('divClientFeedbackOver').style.display = ''; 
    document.getElementById('divClientFeedbackUnder').style.display = ''; 
} 


rbProject.addEventListener('change', rbProjectClicked); 

Но мы еще не закончена. Как я вижу, вы, похоже, перепутали анонимную функцию с именованной функцией.

Что вы хотели напечатать это, вероятно:

rbProject.addEventListener('change', function() { 
    // code here 
}); 

Как вы можете видеть, я объявил функцию в качестве параметра addEventListener. Причина использования анонимной функции является чисто синтаксической. Иногда ее легче читать.