How do you call a JS function in an html file

Question

I currently have this function:

<script>
        function firebase_database(){
          var docRef = firebase.collection("signs").doc("PuA9s68iuxBnJo7PEezC");
          docRef.get().then(function(doc) {
              if (doc.exists) {
                  console.log("Document data:", doc.data());
              } else {
                  // doc.data() will be undefined in this case
                  console.log("No such document!");
              }
          }).catch(function(error) {
              console.log("Error getting document:", error);
          });
        }
        </script>

and I tried calling it with

<script> firebase_database() </script>

but I get this

(index):823 Uncaught TypeError: firebase.collection is not a function
    at firebase_database ((index):823)
    at (index):836

SN: First time working with JS

The function needs to be called or triggered in some way. If you want it to run when a specific element is loaded, you can use `onReady` event callback, bound to a specific HTML element. This is just one example, please clarify your question. — Twisty, Dec 03 '18 at 06:46
Problem seems to be related to how you are loading related files in head section or some other way. You must load dependencies before you can use them. — TARJU, Dec 03 '18 at 06:51
I want it to run right after the website is loaded. I tried firebase_database(); but i keep getting `(index):823 Uncaught TypeError: firebase.collection is not a function at firebase_database ((index):823) at window.onload ((index):839)` — lenany, Dec 03 '18 at 06:53
Where are you loading the firebase script file? Were are you calling the `firebase_database()` ? And do you see any 404 error or other errors in console? — kiranvj, Dec 03 '18 at 06:54
Possible duplicate of [JavaScript error: "is not a function"](https://stackoverflow.com/questions/9825071/javascript-error-is-not-a-function) — But those new buttons though.., Dec 03 '18 at 06:58
I am doing both in the html file and there are no other errors, just that. — lenany, Dec 03 '18 at 06:58
your function calls another function which doesn't exist — at least not in the current scope. — But those new buttons though.., Dec 03 '18 at 06:59

score 0 · Answer 1 · answered Dec 03 '18 at 06:46

0

The function can be called when an event is trigerred or when the page is ready or is loaded. The later has been implemented in the below solution

<script> 
window.onload = function() {
 firebase_database() ;
};
</script>

answered Dec 03 '18 at 06:46

Monica Acha

1,076
9
16

i keep getting `(index):823 Uncaught TypeError: firebase.collection is not a function at firebase_database ((index):823) at window.onload ((index):839)` – lenany Dec 03 '18 at 06:54

score 0 · Answer 2 · answered Dec 03 '18 at 06:47

0

You can't just state the function name - call it like so:

<script>firebase_database()</script>

If you'd like, you can call it after the window loads:

<script>
    window.onload = function() {
        firebase_database()
    };
</script>

answered Dec 03 '18 at 06:47

Jack Bashford

43,180
11
50
79

score 0 · Answer 3 · answered Dec 03 '18 at 06:47

0

You can simply call it like this below

<script>
  firebase_database();
</script>

If the function is written in any other JS file, then you will need to link that file to the HTML file before function initialization.

answered Dec 03 '18 at 06:47

Optimum Creative

1,438
13
21

i keep getting `(index):823 Uncaught TypeError: firebase.collection is not a function at firebase_database ((index):823) at window.onload ((index):839)` – lenany Dec 03 '18 at 06:55
1

In this case, you should check this https://stackoverflow.com/questions/49635868/typeerror-functions-firestore-collection-is-not-a-function – Optimum Creative Dec 03 '18 at 06:58

score 0 · Answer 4 · answered Dec 03 '18 at 06:59

There are different ways you can call JavaScript functions.

First you should be sure on what condition you want a function to be executed? When your html document is ready? While onload? While onclick? While onchange? And so on.

Reason behind your error: The error is not related to you function call mechanism.

var docRef = firebase.collection("signs").doc("PuA9s68iuxBnJo7PEezC");

The problem is on the above highlighted line.

So if you just want to load your JavaScript function inline (a normal way):

<script>
(function your_function() {
  //alert("loaded");
})();
</script>

Another way:

 <script>
  function your_function() {
     //alert("loaded");
  }
  your_funtion();
 </script>

You can use HTML attributes like onclick, onload, onchange like other answers to load your function.

score 0 · Answer 5 · answered Dec 03 '18 at 07:00

When you define a function in the script like that, you then have to later call it.

Consider the following:

<script>
  var st = new Date();

  function helloWorld() {
    var ct = new Date();
    console.log("Hello World", (ct - st));
  }
</script>
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/LARGE_elevation.jpg/1280px-LARGE_elevation.jpg?" />
</div>
<script>
  var img = document.getElementsByTagName("img");
  img.onload = helloWorld();
</script>

As we're loading the <script> elements, they can execute code we already defined earlier.

Update

The error you report refers to this code:

var docRef = firebase.collection("signs").doc("PuA9s68iuxBnJo7PEezC");

It is basically saying that firebase is not defined; thus, firebase.collection() is not a defined function. You will want to review your code and make sure that it is being used properly and all the proper libraries are defined before you call this code.

Hope that helps.

score 0 · Answer 6 · answered Dec 03 '18 at 07:44

Call firebase_database() function after the page is loded.

If you are not referencing the firebase script in the header, please link it first.

If you are already doing it make sure you call the firebase_database() after the reference.

Anyway the event 'DOMContentLoaded' listner will make sure all the scripts are loaded incuding the external scripts with src reference.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        firebase_database();
    }, false);
</script>

But there are exceptions that if the external scripts contain async or defer attributes it will tell the browser to continue processing without waiting for the scripts. In this case you can ideally use window.onload where this triggered at last in the page lifecycle.

<script>
  window.onload = function() {
    firebase_database();
  };
</script>

And remove this code from your script tag

 <script> firebase_database() </script>

score -1 · Answer 7 · answered Dec 03 '18 at 06:51

-1

you can try

window.onload = function() {
 firebase_database() ;
};

<script src="myscript.js"></script>

answered Dec 03 '18 at 06:51

Lily Le

11
2

script in brackets would be in the HTML file meanwhile the actual functions you want to call is in the "myscript.js" file – Lily Le Dec 03 '18 at 06:53

How do you call a JS function in an html file

7 Answers7