Я делаю приложение для класса, и профессор так же смущен, как и я, почему оно не работает. У меня есть 2 файла JS и один HTML. Я экспортирую массив из одного js в другой, затем использую этот js в качестве src в моем html. Вот соответствующий код:
medList.js:
export const CompleteMedList = [
.....
];
main.js:
import {CompleteMedList} from './MedList.js'
HTML:
<script src="main.js"></script>
И здесь ошибка мне дают:
main.js: 1 Uncaught SyntaxError: Неожиданный токен {
Я попытался использовать type = "module" в теге script, но затем он выдает мне эту ошибку, когда я пытаюсь делать вещи, используя функции, объявленные в main.js:
Uncaught ReferenceError: openCycleForm не определен в HTMLButtonElement.onclick
Вот функция, на которую ссылается ошибка в main.js:
function openCycleForm() {
document.getElementById("newCyclePg1").style.width = "100%";
for (var i=0; i < CompleteMedList.length; i++){
document.getElementById("fullMedsList").innerHTML +=
"<input type=\"checkbox\" name=\"meds\" id=\"" + CompleteMedList[i].id + "\">" +
CompleteMedList[i].name + "<br></br>";
}
}
Сначала у меня был код в html файле (там, где он работал), но я просто переместил его в main.js, чтобы я мог использовать массив данных вместо его жесткого кодирования, а затем все сломалось
Похоже, что это немного смешно со встроенным JS, поэтому я предлагаю вам удалить его и вместо этого добавить прослушиватели событий в main.js
Нечто подобное, что я сейчас работаю локально на моей машине:
HTML
<button type="button" class="currentCycle">Current Cycle</button>
JS
const currentCycleButton = document.querySelector('.currentCycle');
currentCycleButton.addEventListener('click', openCurrentCycle, false);
function openCurrentCycle() {
document.getElementById("currentCycle").style.width = '100%';
console.log('done');
}
Чтобы использовать модули ES6, вам нужно указать type="module"
в вашем теге script.
В отличие от обычных скриптов, скрипты модуля (и их импорт) выбираются с помощью CORS. Это означает, что сценарии модуля с несколькими источниками должны возвращать действительные заголовки CORS, такие как
Access-Control-Allow-Origin: *
.
Это означает, что для использования модулей вам необходимо:
Есть хорошая статья об этом @Jaffa The Cake