Question

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

medList.js：

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

main.js：

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

html：

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

这是我得到的错误：

main.js：1未捕获的SyntaxError：意外令牌{

我尝试在script标记中使用type =“ module”，但是当我尝试使用main.js中声明的函数执行操作时，它给了我这个错误：

未捕获的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，因此我可以使用数据数组而不是对其进行硬编码，然后一切都崩溃了……

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

Uncaught SyntaxError：导入数组时出现意外的标记{

1 个答案: