未捕获的语法错误：导入数组时出现意外标记{

Question

我正在为一个班级做一个应用程序，教授和我一样困惑为什么它不起作用。我有2个js文件和一个html。我将一个数组从一个js导出到另一个，然后在我的html中使用那个js作为src。以下是相关代码：

医疗名单。js:

export const CompleteMedList = [
.....
];

main.js：

import {CompleteMedList} from './MedList.js'

HTML：

<script src="main.js"></script>

下面是我得到的错误：

main.js： 1未捕获的语法错误：意外令牌{

我尝试在脚本标记中使用type="模块"，但是当我尝试使用main.js中声明的函数做事情时，它会给我这个错误：

未捕获的引用错误：在HTMLButtonE中未定义openCycleFormlement.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，这样我就可以使用数据数组而不是硬编码，然后一切都坏了...

Answer 1

内联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');
}