按钮在 Javascript 后消失

Question

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

ReferenceError: myClickFunc is not defined

而这个功能就在眼前。下面是相关代码。

我最近做了一个类似的 post 没有得到答案，但我得到了一些提示并做了更多的研究以解决问题。这是我现在的情况。

以下代码行前的按钮：

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 in the event handler (dbRef.on("value", ...). So you're calling it asynchronously, which means the document is closed at this point. Therefore document.write will implicitly call document.open，它会清除当前页面，删除那里的所有内容（尤其是您的按钮）。

不使用 document.write 向文档添加内容，而是使用 DOM 操作。例如，要在页面中追加一个新段落，您可以这样做：

var p = document.createElement("p");
p.innerHTML = "Hello <b>world!</b>";
document.body.appendChild(p);

Answer 2

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

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

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

而不是使用 document.write，您应该通过使用 document.createElement() 创建元素并使用 .appendChild() 添加它们来直接操作 DOM。
虽然使用 document.write 添加按钮是有效的，因为它是在页面加载时完成的并且 document 仍然打开，但通常来说避免 document.write 是个好主意，所以你应该考虑添加它还有 DOM 操作。

按钮在 Javascript 后消失

Button vanishing in Javascript

javascript

events

onclick

referenceerror