Question

我正在尝试通过Firebase Web API为数据库引用设置一个值。当我在一个简单的js脚本中调用set函数时，它可以工作。但是，当我尝试通过一个简单的按钮执行相同操作时，它无法通过。

HTML code snippet：

<html>  
    <head>
        <meta charset="utf-8">
        <title>Organiser</title>
    </head>
    <body>  
        <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>

        <form>
            <button id="sub"></button>
        </form>

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


    </body>
</html>

JS代码段：

(function() {
          // Initialize Firebase
    console.log("Initialising Firebase");
      var config = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
        databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
        projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxx"
      };
      firebase.initializeApp(config);

    firebase.database().ref().child('events').set("WORKS");     
    const buttonsub = document.getElementById('sub');
    sub.onclick = function(){
        console.log("before");
        firebase.database().ref().child('events').set("DOESNT WORK");
        console.log("after");

    }


}());

“ WORKS ”将被写入，但“ DOESNT WORK ”将不会。

Answer 1

事件处理程序中的其他日志是否打印？在我看来他们不会赢，所以你的问题在于处理事件。

您使用了错误的变量名称，请看这一行：

const buttonsub = document.getElementById('sub');
sub.onclick = function() {

应该是：

const buttonsub = document.getElementById('sub');
buttonsub.onclick = function() {

Answer 2

问题的另一个答案是：

var btn = document.getElementById('sub');
btn.addEventListener("click", function(){
    var ref = firebase.database().ref('events');
    ref.set("This should work now");
});

按钮onclick回调中的Firebase Web引用为null

2 个答案: