如何在html文件中调用JS函数

Question

我目前有此功能：

<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>

我尝试用

<script> firebase_database() </script>  

但我明白了

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

SN：第一次使用JS

Answer 1

触发事件或页面准备就绪或加载时，可以调用该函数。 后者已在以下解决方案中实现

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

Answer 2

您不能只声明函数名称-像这样调用它：

<script>firebase_database()</script>

如果需要，可以在窗口加载后调用它：

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

Answer 3

您可以在下面简单地这样称呼它

<script>
  firebase_database();
</script>

如果函数是用其他任何JS文件编写的，那么在函数初始化之前，您需要将该文件链接到HTML文件。

Answer 4

您可以通过多种方式调用JavaScript函数。

首先，您应该确定要在什么条件下执行功能？ 当您的HTML文档ready ？ 在onload ？ 当onclick ？ 虽然onchange ？ 等等。

错误背后的原因：该错误与您的函数调用机制无关。

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

问题在上面突出显示的行上。

因此，如果您只想内联加载JavaScript函数（通常方式）：

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

其他方式：

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

您可以像其他答案一样使用HTML属性（如onclick，onload，onchange）来加载函数。

Answer 5

当在这样的脚本中定义一个函数时，随后必须调用它。

考虑以下：

 <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> 

当我们加载<script>元素时，它们可以执行我们之前已经定义的代码。

更新资料

您报告的错误涉及以下代码：

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

基本上是说firebase没有定义； 因此， firebase.collection()不是定义的函数。 您将需要检查您的代码，并确保在调用此代码之前正确使用了所有代码并定义了所有正确的库。

希望能有所帮助。

Answer 6

页面放置后，调用firebase_database（）函数。

如果您在标题中未引用firebase脚本，请首先将其链接。

如果已经在做，请确保在引用后调用firebase_database（）。

无论如何，事件“ DOMContentLoaded”列表器将确保所有脚本都已加载，包括带有src引用的外部脚本。

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

但是也有例外，如果外部脚本包含异步或延迟属性，它将告诉浏览器继续处理而无需等待脚本。 在这种情况下，您可以理想地使用window.onload，它在页面生命周期的最后触发。

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

并从脚本标签中删除此代码

 <script> firebase_database() </script>

Answer 7

你可以试试

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

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