时间戳

首页 > 解决方案 > 未捕获的 ReferenceError：initializeApp 未定义

javascript - 未捕获的 ReferenceError：initializeApp 未定义

问题描述

我正在尝试将我的网络应用程序上的联系我们表单连接到 firebase，但我收到此错误。

这些是我在 head 标签中的 JS 脚本；

<!--<script src="presentation.js"></script>-->
<!--<script src="home1.js"></script>-->
<script type="module" src="contact.js"></script>

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

<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"></script>
</head>
<body onload="initializeApp()">

这是contact.js 文件：

//import 'firebase';
//import firebase from 'firebase';
//import 'firebase/firestore';
// Initialize Firebase
function initializeApp() {

var firebaseConfig ={
    apiKey: "AIzaSyBlKtHSHez53z6LqZ4GyljzBk5Dq6G95oM",
    authDomain: "white-web-cac.firebaseapp.com",
    databaseURL: "https://white-web-cac.firebaseio.com",
    projectId: "white-web-cac",
    storageBucket: "white-web-cac.appspot.com",
    messagingSenderId: "16825950723472",
    appId: "1:168259507672:web:f352b0c66828d746b06d7904ead",
    measurementId: "G-KXTSR34654V"
};
// Initialize Firebase

firebase.initializeApp(firebaseConfig);
firebase.analytics();


// Reference messages collection
var messagesRef = firebase.database().ref('messages');

// Listen for form submit
document.getElementById('ContactFormData');
document.addEventListener('submit', submitForm);
const db = firebase.collection("ContactFormData");

// Submit form
function submitForm(e){
    e.preventDefault();

    //Get value
    let name = getInputVal('name');
    let company = getInputVal('company');
    let email = getInputVal('email');
    let phone = getInputVal('phone')
    let message = getInputVal('message');

    // Save message
    saveMessage(name, company, email, phone, message);


    // Show alert
    document.querySelector('.alert').style.display = 'block';

    // Hide alert after 3 seconds
    setTimeout(function(){
        document.querySelector('.alert').style.display = 'none';
    },3000);

    // Clear form
    document.getElementById('contactForm').reset();
}

// Function to get form value
function getInputVal(id){
    return document.getElementById(id).value;
}


// Save message to firebase
function saveMessage(name, company, email, phone, message){
    var newMessageRef = messagesRef.push();
    newMessageRef.set({
        name: name,
        company: company,
        email: email,
        phone: phone,
        message: message
    });
}
}

当我检查我的代码时，我收到此错误：“未捕获的 ReferenceError：initializeApp 未定义”
请帮助我解决我可能做错的事情。

编辑：我在这里上传表单的 html 代码：

<div class="contact-c" id="Contact">
    <!--<h1 class="title">Contact Us</h1>-->
    <h2 class="title"><b>We'd love to hear from you!</b></h2>
    <div class="wrapper animated bounceInLeft">
        <div class="contact">
            <h3 class="contact-us" style="text-align: center"><b>Contact Us</b></h3>
            <div class="alert">Your message has been sent!</div>
             <form id="contactForm" method="post">
                <p class="name-field">
                    <label>Name <span>*</span></label>
                    <input type="text" name="name" id="name" required>
                </p>
                <p class="company-field">
                    <label>Company</label>
                    <input type="text" name="company" id="company">
                </p>
                <p class="email-field">
                    <label>Email <span>*</span></label>
                    <input name="email" required type="email">
                </p>
                <p class="phone-field">
                    <label>Phone</label>
                    <input type="text" name="phone" id="phone">
                </p>
                <p class="message-field full">
                    <label>Message <span>*</span></label>
                    <textarea name="message" rows="5" id="message" required></textarea>
                </p>
                <p class="required-field">Required field <span>*</span></p>
                <p class="submit-button">
                    <button type="submit">Submit</button>
                </p>
            </form>
        </div>
    </div>
</div>

标签： javascriptfirebasefirebase-realtime-database

解决方案

html:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="contact.js"></script>

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

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"></script>
</head>

<body onload="initializeApp()">
    <div class="contact-c" id="Contact">
        <!--<h1 class="title">Contact Us</h1>-->
        <h2 class="title"><b>We'd love to hear from you!</b></h2>
        <div class="wrapper animated bounceInLeft">
            <div class="contact">
                <h3 class="contact-us" style="text-align: center"><b>Contact Us</b></h3>
                <div class="alert">Your message has been sent!</div>
                <form id="contactForm" method="post">
                    <p class="name-field">
                        <label>Name <span>*</span></label>
                        <input type="text" name="name" id="name" required>
                    </p>
                    <p class="company-field">
                        <label>Company</label>
                        <input type="text" name="company" id="company">
                    </p>
                    <p class="email-field">
                        <label>Email <span>*</span></label>
                        <input id="email" name="email" required type="email">
                    </p>
                    <p class="phone-field">
                        <label>Phone</label>
                        <input type="text" name="phone" id="phone">
                    </p>
                    <p class="message-field full">
                        <label>Message <span>*</span></label>
                        <textarea name="message" rows="5" id="message" required></textarea>
                    </p>
                    <p class="required-field">Required field <span>*</span></p>
                    <p class="submit-button">
                        <input type="submit" value="Submit">
                </form>
            </div>
        </div>
    </div>
</body>

</html>

js：

function initializeApp() {

var firebaseConfig ={
    apiKey: "AIzaSyBlKtHSHez53z6LqZ4GyljzBk5Dq6G95oM",
    authDomain: "white-web-cac.firebaseapp.com",
    databaseURL: "https://white-web-cac.firebaseio.com",
    projectId: "white-web-cac",
    storageBucket: "white-web-cac.appspot.com",
    messagingSenderId: "16825950723472",
    appId: "1:168259507672:web:f352b0c66828d746b06d7904ead",
    measurementId: "G-KXTSR34654V"
};
// Initialize Firebase

firebase.initializeApp(firebaseConfig);
firebase.analytics();
const firestore= firebase.firestore()

// Listen for form submit
const form= document.getElementById('contactForm');
form.addEventListener('submit', submitForm);
const db = firestore.collection("ContactFormData");

// Submit form
function submitForm(e){
    e.preventDefault();

    //Get value
    var name = getInputVal('name');
    var company = getInputVal('company');
    var email = getInputVal('email');
    var phone = getInputVal('phone')
    var message = getInputVal('message');

    // Save message
    saveMessage(name, company, email, phone, message);


    // Show alert
    document.querySelector('.alert').style.display = 'block';

    // Hide alert after 3 seconds
    setTimeout(function(){
        document.querySelector('.alert').style.display = 'none';
    },3000);

    // Clear form
    document.getElementById('contactForm').reset();
}

// Function to get form value
function getInputVal(id){
    return document.getElementById(id).value;
}


// Save message to firebase
const saveMessage= function(name, company, email, phone, message){
    firestore.collection("ContactFormData").add({
        name,
        company,
        email,
        phone,
        message
    })
}
}

如果它不起作用，请检查您的 Firestore 数据库中的规则。

推荐阅读