Question

我在按下以下代码时出现问题。这是一个Javascript程序，我在控制台中收到一条错误消息：

ReferenceError: myClickFunc is not defined

虽然这个功能在我眼前。以下是相关代码。

我最近做了一个类似的帖子，没有得到答案，但我得到了一些提示，并做了一些更多的研究，以解决问题。以下是我目前的情况。

以下代码中的按钮：

dbRef.on("value", function(snapshot)

按预期工作，但很快就会消失。其他按钮（在循环内）产生上述错误消息。我注意到的另一件事是页面似乎永远不会结束加载。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web application</title>
</head>

<body>

<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>

<script>

function someCallingFunc(timeRef,work)
{/* Beginning of someCallingFunc */
var workRef = timeRef.child(work)

workRef.on("value", function(workSnapshot) {
    var rcdData = workSnapshot.val();
    document.write("English name: " + rcdData["engName"] + "<br/>\n");
    document.write("<input type='Submit' value='Edit' onClick='myClickFunc()'><br/>\n");
});

}/* End of someCallingFunc */


function myClickFunc()
{/* Beginning of myClickFunc */
window.open("http://www.google.com");
}/* End of myClickFunc */


var config = {
  apiKey: ".........",
  authDomain: "..........firebaseapp.com",
  databaseURL: "..........firebaseio.com",
  projectId: ".........",
  storageBucket: "..........appspot.com",
  messagingSenderId: "........."
};
firebase.initializeApp(config);

var dbRef = firebase.database().ref().child('DataList');

// This button works but only appears for half a second, then disappears.
document.write("<button onClick='myClickFunc()'>EDIT</button><br/>\n");

dbRef.on("value", function(snapshot) {

for (number in snapshot.val()) {
    document.write("Year " + number + " :<br/>\n");
    var numberRef = dbRef.child(number)
    numberRef.on("value", function(numberSnapshot) {
      for (work in numberSnapshot.val()) {
        someCallingFunc(numberRef,work);
        document.write("<br/>\n");
      }
    });
}});
</script>

</body>
</html>

我试图以各种方式更改myClickFunc（）的位置，但没有成功。

在JS中没有经验，我必须做一些初学者的错误。但那个错误在哪里？

Answer 1

问题是您在事件处理程序（document.write）中使用document.write。因此，您将异步调用它，这意味着此时文档已关闭。因此document.write将隐式调用document.open，它会清除当前页面，删除那里的所有内容（尤其是按钮）。

不使用var p = document.createElement("p"); p.innerHTML = "Hello <b>world!</b>"; document.body.appendChild(p);向文档添加内容，而是使用DOM操作。例如，要向页面添加新段落，您可以执行以下操作：

NSString * const myString = @"Bar"

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Document/write

查看第一个注释：＆＃34; ...在已关闭（加载）的文档上调用document.write会自动调用document.open，这将清除文档。＆＃34;

您的事件处理程序在页面加载后的某个时间被调用，这意味着document已关闭。

您应该通过document.write创建元素并使用document.createElement()添加元素来直接操作DOM，而不是使用.appendChild()。虽然可以使用document.write添加按钮，因为在页面加载时已完成，document仍处于打开状态，但一般来说，避免{{1因此你应该考虑在DOM操作中添加它。

按钮在Javascript中消失

2 个答案: