單擊 html 按鈕時，如何使用外部 javascript 文件調用 function？

Question

我正在嘗試創建一個單擊時將添加文本的按鈕。 當 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;
      }
    })

Answer 1

通過在事件回調中聲明您的 createList createList() function，您實際上是將此 function 限定為回調本身。 您可以在您的基礎 javascript 中將其聲明為 function，它應該一切都好。

前：

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

后：

function createList() {
  var x = document.getElementById('ex').value;
  document.getElementById('demo').innerHTML = x;
}

如果您想在聲明 function 之前等待 DOM 被加載，那么您應該像這樣在事件回調中附加您的偵聽器：

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

Answer 2

createList 在另一個 function 中（addEventListener 的箭頭 function），因此在 html 中無法訪問它。

把它從addEventListener中取出

或其他方式 - 在addEventListener中執行 onclick 附件，而不是在 html 中，例如：

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

Answer 3

你可以這樣做

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

APP.JS

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