如何在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>

但也有例外，如果外部脚本包含 async 或 defer 属性，它会告诉浏览器继续处理而不等待脚本。在这种情况下，您可以理想地使用 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>