javaScript onclick函数在页面上被调用当单击页面上的按钮时，我有一个简单的JavaScript函数。但是，该页面加载后立即被调用。谁能告诉我这里的问题是什么？ ht ...

Question

而“ script.js”文件如下。

var url = "example.txt";

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction(xhttp) {
  document.getElementById("demo").innerHTML = xhttp.responseText;
}

var btn = document.getElementById("btn");
btn.onclick = loadDoc(url, myFunction);

当用户单击按钮时，您必须附加一个事件侦听器，该侦听器调用该功能：

btn.addEventListener('click', () => {
  loadDoc(url);
});

Answer 1

脚本的最后一行是调用该功能，而不是将处理程序分配给它。由于您有要与之调用的参数，因此您需要使用某些内容将参数和函数捆绑在一起，以供调用。如果用以下内容替换最后一行，则应有效：

btn.onclick = loadDoc.bind(undefined, url, myFunction) // "this" value is not needed, so it is left undefined

Answer 2

0
投票

使用这样的箭头函数：

btn.onclick = () => loadDoc(url, myFunction);

Answer 3

0
投票

loadDoc()

功能。您应该尝试一下-

Answer 4

var url = "https://jsonplaceholder.typicode.com/posts"; function loadDoc() { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", url, true); xhttp.send(); }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn" onclick='loadDoc()'>ClicMe!</button>
    <div id="demo"></div>
    <script src="script.js"></script>
  </body>
</html>

var url = "https://jsonplaceholder.typicode.com/posts"; function loadDoc() { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", url, true); xhttp.send(); }

Answer 5

btn.onclick = loadDoc(url, myFunction);

这是将LOADDOC的返回值分配给btn.onclick而不是其参考。为了获得函数的返回值，您必须运行该功能。因此，您要做的就是分配函数参考，但是您有要通过的参数。

btn.addEventListener("click", () => loadDoc(url, myFunction));

使用addeventlisteren是最佳实践。这分配了一个匿名函数的引用，该函数将带有您要通过的参数调用loadDoc。

javaScript onclick函数在页面上被调用当单击页面上的按钮时，我有一个简单的JavaScript函数。但是，该页面加载后立即被调用。谁能告诉我这里的问题是什么？ ht ...

问题描述投票：0回答：6

6个回答

最新问题

javaScript onclick函数在页面上被调用 当单击页面上的按钮时，我有一个简单的JavaScript函数。但是，该页面加载后立即被调用。谁能告诉我这里的问题是什么？ ht ...

问题描述 投票：0回答：6

6个回答

最新问题

javaScript onclick函数在页面上被调用当单击页面上的按钮时，我有一个简单的JavaScript函数。但是，该页面加载后立即被调用。谁能告诉我这里的问题是什么？ ht ...

问题描述投票：0回答：6