Uncaught SyntaxError: неожиданный токен {при импорте массива

1

Я делаю приложение для класса, и профессор так же смущен, как и я, почему оно не работает. У меня есть 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, чтобы я мог использовать массив данных вместо его жесткого кодирования, а затем все сломалось

  • 0
    может не решить всю вашу проблему, но для «Uncaught ReferenceError: openCycleForm не определен в HTMLButtonElement.onclick», вы убедились, что ваш файл JS загружается перед документом html, если JS манипулирует html? И / или что ваш JS использует что-то вроде документа под нагрузкой при взаимодействии с DOM?
  • 1
    Эй, вы можете дать более подробные примеры кода. Трудно сказать, что происходит из крошечных кусочков. Кроме того, отформатируйте код правильно:]
Показать ещё 8 комментариев
Теги:

2 ответа

0
Лучший ответ

Похоже, что это немного смешно со встроенным 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');
}
  • 0
    Спасибо, что сработало! Это перепуталось с некоторыми из моих CSS, но я могу работать с этим.
0

Чтобы использовать модули ES6, вам нужно указать type="module" в вашем теге script.

В отличие от обычных скриптов, скрипты модуля (и их импорт) выбираются с помощью CORS. Это означает, что сценарии модуля с несколькими источниками должны возвращать действительные заголовки CORS, такие как Access-Control-Allow-Origin: *.

Это означает, что для использования модулей вам необходимо:

  • а) отключить безопасность браузера (не рекомендуется)
  • б) запустить сервер для обслуживания ваших файлов с правильными заголовками CORS (рекомендуемая опция), напр. HTTP-сервер

Есть хорошая статья об этом @Jaffa The Cake

Ещё вопросы

Сообщество Overcoder
Наверх
Меню