使用 HTML 按钮写入 Firebase 实时数据库不起作用答案

【问题标题】：Writing to the Firebase Realtime Database with an HTML button is not working使用 HTML 按钮写入 Firebase 实时数据库不起作用
【发布时间】：2019-10-21 22:34:47
【问题描述】：

我正在尝试一个非常简单的 Firebase 实时数据库，我只是在其中创建一个子对象，然后设置一个值。但并没有改变那里的任何价值。

我将规则设置为公开，每个人都可以读写，所以这不是身份验证问题。我尝试使用firebase.database()ref().child("Value").set("Another value")，但无法正常工作。我已经对其进行了初始化，我尝试通过本地托管和通过 Firebase 托管进行托管，但也无法正常工作。我在手机上试过了，也不好使。

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dispensador</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://use.typekit.net/jmo2njo.css">
</head>
<body>
    <h1>SELECCIONA TU BEBIDA</h1>
    <div class = "botones">
        <a href= "Subpaginas/cocaCola.html"><button id="close-image" onclick="submmitClick()"><img src="Images/cocaColaCircle.png"></button></a>
        <a href= "Subpaginas/cocaColaZero.html"><button id="close-image"><img src="Images/cocaColaZeroCircle.png"></button></a>
        <a href= "Subpaginas/sprite.html"><button id="close-image"><img src="Images/spriteCircle.png"></button></a>
        <a href= "Subpaginas/fanta.html"><button id="close-image"><img src="Images/fantaCircle.png"></button></a>
    </div>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            "HERE ARE ALL MY CONFIG DATA AND IT'S OK. I'VE CHECKED A HUNDRED TIMES"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();

        function submmitClick() {
            window.alert("Wenaaaa sotooo")
            firebase.database().ref().child("Hola").set("Some value")
        }
    </script>
    <script src="index.js"></script>
</body>
</html>

Javascript 代码：

// Set the configuration for your app
  // TODO: Replace with your project's config object
  var config = {
    "HERE ARE ALL MY CONFIG DATA AND IT'S OK. I'VE CHECKED A HUNDRED TIMES"
  };
  firebase.initializeApp(config);
  firebase.database().goOnline();

// Get a reference to the database service
var database = firebase.database();

function submmitClick() {
        window.alert("Wenaaaa sotooo")
        firebase.database().ref().child("Value").set("Some value")
}

总而言之，问题在于该页面没有改变我数据库中的任何内容。

【问题讨论】：

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

这是因为您的按钮编码如下：

<a href= "Subpaginas/cocaCola.html"><button id="close-image" onclick="submmitClick()"><img src="Images/cocaColaCircle.png"></button></a>

您将它包含在a href 标记中：结果是onClick 事件未被触发。

只需按照以下步骤操作即可。

<button id="close-image" onclick="submmitClick()"><img src="Images/cocaColaCircle.png"></button>

【讨论】：