Как преодолеть ошибку «функция не определена» при загрузке внешнего файла. js?

Question

Я хотел бы создать плагин JS (с ES6), чтобы его можно было вызывать из файла HTML, например:

<div id="emails-box"></div>
<script src="emails-box.js"></script>
<script>
   const container = document.querySelector('#emails-box')
   EmailsBox({container, ...options})
   //some code
</script>

, и его можно использовать независимо.

Что будет делать EmailsBox, так это взять контейнер и добавить дочерний элемент div с ящиком для хранения нескольких писем.

Я пытался сделать это в течение 2-3 дней, но каждый раз, когда я пытаюсь загрузить файл. js, я получаю:

EmailsBox is not defined

Я впадаю в отчаяние. Не могли бы вы дать мне немного света? Спасибо!

РЕДАКТИРОВАТЬ : В моем почтовом ящике. js файл, я мог бы иметь что-то вроде этого:

var EmailsBox = function(obj){

   console.log("EmailsBox called")
   // some code

   return true;

}

Answer 1

Скорее всего, неверный путь к файлу. js. Поэтому сначала убедитесь, что вы указали правильный файл. Если это так, то попробуйте определить функцию, например, не назначать ее переменной, она не может быть определена на странице загрузки.

function EmailsBox(obj){
    // some code
}

И если вам действительно нужно присвоить переменную, попробуйте использовать функцию ready.

var EmailsBox = function(obj){

   console.log("EmailsBox called")
   // some code

   return true;

}

<script>
(function() {
    EmailsBox({container, ...options})
})();
</script>

Answer 2

отлично сработало для меня. Убедитесь, что адрес электронной почты. js находится в той же папке, что и индекс. html, и имя совпадает с именем, на которое вы ссылаетесь. рабочая настройка

Answer 3

Есть большая вероятность, что проблема с вашим исходным кодом, но если это происходит из-за того, что он не загружается, что было бы странно, попробуйте использовать js для загрузки скрипта, если это не сработает, то это неправильно, и вам следует проверить его прав

var source = 'source here to script file';
var script = document.createElement('script');
script.onload = function () {
    //what you want to do with this script
};
script.src = source();

document.head.appendChild(script);

Answer 4

При вызове функции убедитесь, что переменная options определена. Чтобы вместо вызова:

EmailsBox({container, ...options});//when options is not defined,

сначала определить параметры, а затем вызвать функцию EmailsBox следующим образом:

var options = 'hello'; //for example
EmailsBox({container, ...options});

Если на файл emails-box. js имеется правильная ссылка, это должно работать просто отлично.