javascript - 使用js文件中的数组时出现错误

Question

我有一个 html 文件，我想在其中显示一个有序列表。该列表来自 js 文件中的一个数组，每次我使用“src”连接两个文档时，我不断收到错误消息js 文件中的数组已声明但尚未声明。HTML 代码

<div id=fruit>
      <h3>Displaying Fruits</h3>

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

         var list = document.createElement('ol');
         fruits.forEach(function (element){
           var li = document.createElement('li');
           li.textContent = element;
           list.appendChild(li);
         });
         var fruit = document.querySelector('#fruit');
         fruit.appendChild(list);
      </script>
    </div>

JS代码

const fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];

错误

Uncaught SyntaxError: Identifier 'fruits' has already been declared at VM13 list.js:1

Answer 1

请注意，任何具有 src 属性的脚本标记都会忽略脚本 block 内写入的所有内容。因此，您可能需要再添加一个脚本标记:

<script src="js/list.js"></script>
<script>
  var list = document.createElement('ol');
  fruits.forEach(function(element) {
    var li = document.createElement('li');
    li.textContent = element;
    list.appendChild(li);
  });
  var fruit = document.querySelector('#fruit');
  fruit.appendChild(list);
</script>