单击 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;
  }