Как вызвать функцию javascript, определенную в другом файле из HTML?

ProgramBox

Как вызвать функцию javascript, определенную в другом файле из HTML?

Post author:admin
Запись опубликована:31 января, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь написать веб-сайт, но когда я пытаюсь вызвать функцию JavaScript, определенную в другом файле из моего HTML-кода, я получаю следующую ошибку

Неперехваченная ошибка ссылки: fetchConfs не определена в admin.html:46

Я импортировал скрипт в <head> часть HTML, но по какой-то причине я все еще получаю сообщение об ошибке.

admin.html:

 <!DOCTYPE html>
<head>    
    <link rel="stylesheet" href="bundle.css">
    <script type="text/javascript" src="bundle.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.3/firebase.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/5.9.3/firebase-firestore.js"></script>
    <title>Dilo </title>
</head>
<header class="header">
    <img src="logo.png">
    <p>Sobreviviendo a lo imposible</p>
</header>

<body>
    <script type="text/javascript">
        var firebaseConfig = {
            apiKey: "",
            authDomain: "dilo-mas.firebaseapp.com",
            databaseURL: "https://dilo-mas.firebaseio.com",
            projectId: "dilo-mas",
            storageBucket: "",
            messagingSenderId: ""
        };
        firebase.initializeApp(firebaseConfig);
        initApp = function () {
            firebase.auth().onAuthStateChanged(function (user) {
                if (user) {
                    var email = user.email;
                    user.getIdToken().then(function (accessToken) {
                        document.getElementById("greeter").textContent = "Hola "   email;
                    });
                } else {
                    window.location.href = '/login.html'
                }
            }, function (error) {
                console.log(error);
            });
        };
        window.addEventListener('load', function () {
            initApp()
            document.getElementById("logout").onclick = function logout() {
                firebase.auth().signOut().then(function () { window.location.href = '/login.html' });
            }
            var confs = fetchConfs();
        });
    </script>
    <h1 id="greeter">Error, inicia sesión para continuar</h1>
    <button class="mdc-button foo-button" id="logout" style="float: right;">
        Cerrar Sesión
    </button>
</body>
</html>

app.js (Этот файл скомпилирован для bundle.js использование веб-пакетов перед развертыванием):

 import {MDCRipple} from '@material/ripple/index';
import { MDCTextField } from '@material/textfield';
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/firebase-auth';

const ripple = new MDCRipple(document.querySelector('.foo-button'));

var firebaseConfig = {
    apiKey: "",
    authDomain: "dilo-mas.firebaseapp.com",
    databaseURL: "https://dilo-mas.firebaseio.com",
    projectId: "dilo-mas",
    storageBucket: "",
    messagingSenderId: ""
};
firebase.initializeApp(firebaseConfig);

document.getElementById("tbut").onclick = function submitForm() {
    var date = Date.now().toString()
    var x = document.getElementById("conf").value;
    firebase.firestore().collection("confesiones").doc(date).set({
        conf: x
    })
        .then(function () {
            console.log("Document successfully written!");
            var y = document.getElementById("conf").value;
            console.log("input "   x)
            alert("Exito");
        })
        .catch(function (error) {
            console.error("Error writing document: ", error);
            alert("Error envíando tu confesión")
        });
    document.getElementById("conf").reset();
}

function fetchConfs() {
    var confs = db.collection("confesiones").where(firebase.firestore.FieldPath.documentId(), "!=", "root").get();
    return confs;
}

Я уже пытался присвоить fetchConfs() объекту window или глобальной переменной, но я все еще получаю ту же ошибку.

Примечание: я использую webpacks и другие плагины npm для компиляции кода js и sass в статические файлы для развертывания.

1. Просто назначить fetchConfs window ?

2. из того, что я мало знаю о webpack, компиляторах и т. Д., Я знаю, что встроенный файл в JS часто не поддерживает схему именования. Таким образом, это может быть определено в вашем коде, но webpack может экспортировать его как _fetchConfs или что-то в этом роде. Возможно, посмотрите на скомпилированный вывод и посмотрите, что вы можете найти. если это все еще не работает, то вы можете попробовать назначить функцию объекту window .

Ответ №1:

Скрипты выполняются в том порядке, в котором они перечислены <head> , затем любые в теле. Если функция находится в скрипте, указанном ниже, эта функция может быть еще не определена при ее запуске.

Чтобы исправить это, определите fetchConfs ранее.