单击html按钮时，如何使用外部javascript文件调用函数？

我正在尝试创建一个在单击时将添加文本的按钮。当javascript位于html文件中时，它起作用，但是当我从外部链接时，它不起作用。

HTML：

<input id="ex" type="text">
<button onclick="createList()">Create List</button>
<p id="demo">Click button</p>
<script src="app.js"></script>

Javascript：

document.addEventListener("DOMContentLoaded", () => {
  function createList() {
    var x = document.getElementById("ex").value;
    document.getElementById("demo").innerHTML = x;
  }
})