I am having a problem with putting a button in the following code.
This a Javascript program and I get an error message in the console saying:
ReferenceError: myClickFunc is not defined
while this function is in front of my eyes. Below is the relevant code.
I made a similar post recently without getting an answer, but I got some tips and did some more research in order to solve the problem. Here is the current situation I am in.
The button in the following code before the line:
dbRef.on("value", function(snapshot)
works as it should but disappears very soon. The other buttons (inside the loop) produce the error message mentioned above. One more thing I noticed is that the page never seems to end loading.
<!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>
I have tried to change the location of the myClickFunc() in various ways but with no success.
Not being very experienced in JS, I must be doing some beginner mistake. But where is that mistake?
The problem is that you're using 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, which clears the current page, removing everything that was there (in particular your button).
Instead of using document.write to add content to the document, use DOM manipulation. For example, to append a new paragraph to the page, you can do this:
var p = document.createElement("p");
p.innerHTML = "Hello <b>world!</b>";
document.body.appendChild(p);